Form validation error overlaps TextArea count

[Josh-ES]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

When creating a <Form> using antd, if I create a <TextArea> with showCount set to true within a <Form.Item> block, and I then add a validation help text to that <Form.Item> that is really long, it is possible for the help text to overlap the count.

<Form>
  <Form.Item
    label="Error"
    hasFeedback
    validateStatus="error"
    help={
      "Should be combination of numbers & alphabets, but this message is "  
      "deliberately long so it overlaps the counter without custom styling. "  
      "And I mean, this needs to be really, really long on certain screen "  
      "sizes to do this overlapping thing like this."
    }
  >
    <Input.TextArea
      allowClear
      maxLength={100}
      placeholder="with input password and allowClear"
      showCount
    />
  </Form.Item>
</Form>

What is expected?

I'd expect the error message to wrap around the counter.

What is actually happening?

The error message ends up displaying underneath the counter.

Environment	Info
antd	4.12.3
React	16.13.1
System	macOS Catalina 10.15.7
Browser	Google Chrome v89.0.4389.82

[xrkffgg]

This is not a good way to fix it. There is no good CSS to optimize this scene.

I thought of a way, dynamically adjust the style and move the prompt information down.

See:

https://codesandbox.io/s/antd-form-validation-overlaps-textarea-count-forked-ojhzl?file=/index.js

[Josh-ES]

@xrkffgg that solution definitely works, but is not an ideal design just because of the empty space it creates. I'm happy either way honestly, the overlap is the main issue from my perspective.

[afc163]

#28130

@AlanCutFlim

[AlanCutFlim]

Now the TextArea count is using a ::after element. Currently the count element and the explain element are in a different level, as far as i know it seems like there isn't a proper way to handle this unless we put them in a same level.

[StubbornDeer]

Any progress on this issue?