I'm attempting to have the label and input text appear in the same line. I would like the output to look like this: https://i.sstatic.net/LRFiW.png
The input box should occupy all available space after the label has taken its place. In order to achieve this, I am utilizing flexbox in my HTML:
.abc{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#some-input {
margin : 10px;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 20px;
font-size:15px;
border: 2px solid #7e7e7e;
flex-grow : 30;
}
#label{
margin : 10px;
font-size:15px;
}
<div class="abc">
<div id="label"><b>labelxyz<b></div>
<input id="some-input" name= "some-input" placeholder="Enter input"/>
</div>
However, the input text is not taking up the remaining space as intended. Currently, the output looks like this: https://i.sstatic.net/BEWKp.png
Any assistance on this matter would be greatly appreciated.