ErnieKev ErnieKev - 1 year ago 87
CSS Question

Align text and input so that they are neatly inline vertically

A bit of a beginner's question, I am trying to make my form to look like the following image where the text on the left are vertically aligned and the input field has the same widths.

twitter form

<div class="container">
<div class="row">
<div class="col-md-6">
<label class="d-inline">Full Name: </label>
<input type="text" placeholder="First Name" formControlName="firstName">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>

<div class="row">
<div class="col-md-6">
<label class="d-inline">Email: </label>
<input type="email" placeholder="Email" formControlName="email">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>


Which gives me the following result. I also want the input to stretch to the remaining parent container so that it stops before the "some text".

my attempt

I have tried to set the width css property of the input field to 100% hoping that it will do it. However, that just stretch it all the way which forces it to go to the next line.

I am using bootstrap 4 with Angular2.

Answer Source

Just give your p tag a min-width. I gave the input a max-width so it's better when your screen size is smaller. Hope this answers your question

p.d-inline {
    min-width: 75px;
    display: inline-block;
    text-align: right;  
    margin-left: 30px;
}

h6 {
    margin-left: 30px;  
}
input {
    max-width: 100px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download