I need to keep the first 2 child elements on the same row while placing the third element below at full width, all using flex.
My focus is on utilizing the flex-grow and flex-shrink properties for the first 2 elements without relying on percentages. However, the third element must be full width and positioned below the first two.
The addition of a programmatic label element after the text element in case of an error complicates the situation as I cannot modify existing code.
How can I ensure that the label element spans 100% width beneath the other two elements positioned with flex?
.parent {
display: flex;
align-items: center;
width: 100%;
background-color: #ececec;
}
.parent * {
width: 100%;
}
.parent #text {
min-width: 75px;
flex-shrink: 2.25;
}<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>