I have a requirement to display a character count underneath an input field, which is a required field.

However, I’m encountering an issue: when the user does not input anything and the error message appears, it pushes the character count far below the input field:

<div class="ac-input">
    <h2>Project Name</h2><span class="required-label">Required</span>
    <div class="input-wrapper">
        <lightning-input type="text" label="Name" variant="label-hidden"
                value={apeName}
                placeholder={namePlaceholder}
                message-when-too-long={nameMaxLengthError}
                message-when-value-missing={nameMissingError}
                onchange={handleNameChange} max-length="255" required></lightning-input>
        <div class="character-count-container">
            <p class="character-count">{nameCharactersLeft} characters left</p>
        </div>
    </div>
</div>
       
<div class="ac-input">
    <h2>Project Description</h2>
    <lightning-textarea name="description" label="Project Description" variant="label-hidden"
            value={apeDescription} 
            placeholder={descriptionPlaceholder}
            message-when-too-long={descriptionMaxLengthError}
            onchange={handleDescriptionChange} maxlength="500">
    </lightning-textarea>
    <div class="character-count-container">
        <p class="character-count">{descriptionCharactersLeft} characters left</p>
    </div>
</div>

.required-label
{
  padding-left:8px;
  color: rgb(112, 112, 112);
  font-family: PublicSans-Italic;
  font-size:12px;
  font-style:italic;
  font-weight:normal;
}

.button-spacing{
  padding-bottom:12px;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

.character-count-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 5px;
  bottom: -20px;
}

.character-count {
  font-size: 13px;
  color: rgb(112, 112, 112);
  font-family: PublicSans-Regular;
  white-space: nowrap;
  margin-left: auto;
}

I did try to modify the CSS in number of ways with no result.

How do I ensure that both the character count text and error message stay on the same line when the error message appears?