I'm struggling with a similar issue to the one discussed in this post, where I can't seem to get my input text to display as inline-block properly --> inline-block overflowing outside container
My goal is to have 5 input texts displayed like so:
"Item 1"
"Item 2" "Item 3"
"Item 4" "Item 5"
This is what my HTML looks like:
<div class="form">
<div id="inputs">
<label> Email </label>
<div>
<input type="text" [(ngModel)]="email" maxlength="100">
</div>
<label> Address </label>
<div>
<input type="text" [(ngModel)]="address" maxlength="50">
</div>
.....
</div>
</div>
And here's what my CSS looks like:
#inputs {
display: inline-block;
vertical-align: top;
label {
....
}
div {
width: 100%;
....
}
}
I've experimented with display: table, position: absolute, and display: inline-flex but haven't found a solution that meets my requirements.