CODEWITHSUNDEEP
htmlcss
asong91
asong91

Reputation: 417

Align button with input fields that has no title

I have two fields with titles and a button without a title after that.

How can I make the button aligned with the input fields instead of the titles?

.input-x-box {
    float: left;
}
.input-y-box {
    float: left;
}
<div class="input-x-box inline">
    <div class="title">Add New Stuff</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="input-y-box inline">
    <div class="title"> More</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="group-btn inline">
    <button class="btn btn-default green-bg">Add</button>
</div>

Upvotes: 0

Views: 36

Answers (1)

user4639281
user4639281

Reputation:

If you use display: inline-block instead of float, all of the items line up along the bottom, because the default vertical-align is baseline, which tells the browser to render the baseline of the box aligned with the baseline of the parent box.

You should only use floats when you want something to flow around the item, like an image in a paragraph.

.inline {
    display: inline-block;
}
<div class="input-x-box inline">
    <div class="title">Add New Stuff</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="input-y-box inline">
    <div class="title"> More</div>
    <div class="bootstrap input-group input-group-sm btn-group">
        <input type="text" class="form-control" value="" placeholder="Enter stuff">
    </div>
</div>
<div class="group-btn inline">
    <button class="btn btn-default green-bg">Add</button>
</div>

Upvotes: 2

Related Questions