Aligning a span to fall underneath an input box - css

Question

I have the code below for a blazor component which displays a textbox that can be edited with the click
of a button.
#if (_editing)
{
<div class="floatingbox position-relative">
<input type="text" value="#AddText" #oninput="#(e => { AddText = e.Value.ToString(); })"
#onblur="#(e => { InputBlured(e); })" #onkeyup="#(e => KeyPressed(e))" maxlength="75" />
<button type="button" class="button_search_term">
<div #onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
</button>
</div>
}
else
{
<div class="floatingbox position-relative" #ondblclick="ToggleMode">
<span>#AddText</span>
</div>
}
I want to display this span right under the input box for error messages
<span hidden="#IsShow" class="error-color">Error message</span>
I wrote this css and used display block but what happens is everytime there is an error
the span above is enabled and rearranges the input box controls underneath one another. There can be many of these controls
on a page.
.error-color{
color:red;
//display:block;
padding-left:35px;
}
How can I style this such that the span stays directly under the inputbox?

Answer 1

You can achieve this with position:absolute
See this example:
.control{
position: relative;
}
.error{
position: absolute;
left: 0;
bottom: -10px;
font-size: 10px;
line-height: 1;
}
<div class="control">
<input type="text">
<span class="error">ERROR</span>
</div>
Keep in mind that you have to put position:relative to the parent Element.
Your final HTML shoudl look something like this:
<div class="floatingbox position-relative">
<input type="text" value="#AddText" #oninput="#(e => { AddText = e.Value.ToString(); })" #onblur="#(e => { InputBlured(e); })" #onkeyup="#(e => KeyPressed(e))" maxlength="75" />
<button type="button" class="button_search_term">
<div #onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
</button>
<!-- insert your error span here -->
<span hidden="#IsShow" class="error-color">Error message</span>
</div>