Have input elements starting at different left and end the same rights - html

Question

I'm looking to have the right sides of input boxes aligned to the div width - 10px but start strait after each label.
Ideally using just css.
If I needed I guess I could use js / vue to calculate the container width and change the element.style.width of the boxes but I'd rather avoid that.
The style="width: 85%;" is what I'm looking to replace.
<div id="send-to">
To: <input type="text" id="mail-send" style="width: 85%;">
</div>
<div id="host">
STMP Host: <input type="text" id="mail-host" style="width: 85%;">
</div>
<div id="port">
Port: <input type="text" id="mail-port" style="width: 85%;" >
</div>
In the screenshot the widths are hard coded

Answer 1

You can use flex to achieve it, see the example below
.div-wrap{
display: block;
width: 85%;
}
.div-flex{
display: flex;
justify-content: space-between;
white-space: nowrap;
}
input{
width: 100%;
}
<div class="div-wrap">
<div id="send-to" class="div-flex">
To: <input type="text" id="mail-send">
</div>
<div id="host" class="div-flex">
STMP Host: <input type="text" id="mail-host">
</div>
<div id="port" class="div-flex">
Port: <input type="text" id="mail-port" >
</div>
</div>

Answer 2

You can achieve this with using the table-cell layout. See working example below. I added a wrapper class, so it wont destroy the layout of your remaining elements.
.field-wrapper > div > input{
display:table-cell;
width:100%;
}
.field-wrapper > div{
width:100%;
display:table;
}
.field-wrapper > div > p{
display:table-cell;
width:1px;
white-space:nowrap;
}
.field-wrapper{
width:250px;
}
<div class="field-wrapper">
<div id="send-to">
<p>To:</p><input type="text" id="mail-send" style="">
</div>
<div id="host">
<p>STMP-Host:</p><input type="text" id="mail-host" style="">
</div>
<div id="port">
<p>Port:</p><input type="text" id="mail-port" >
</div>
</div>

Answer 3

I hope this is what u r expecting:
.main {
width: 450px;
display: flex;
border: 5px solid black;
flex-direction: column;
}
.main div {
width: inherit;
display: flex;
}
.main div input {
flex: 1;
}
<div class="main">
<div id="send-to">
To: <input type="text" id="mail-send">
</div>
<div id="host">
STMP Host: <input type="text" id="mail-host">
</div>
<div id="port">
Port: <input type="text" id="mail-port">
</div>
</div>