Style form-inline does not work on all the elements - html

Question

Here is my partial bootstrap code. The form lets you search a person by first name and last name:
<div style="text-align:right">
<div class="form-inline">
<div class="form-group">
<label for="Search">Search</label>
</div>
<div class="form-group">
<input class="form-control text-box single-line" id="FirstName" name="FirstName" placeholder="First Name" type="text" value="" />
</div>
<div class="form-group">
<input class="form-control text-box single-line" id="LastName" name="LastName" placeholder="Last Name" type="text" value="" />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
The topmost div helps the set of inner controls to be shown on the right side of the web page (as desired).
When the viewport is wide enough, all the controls are displayed in one line as they are supposed to be.
However, when the viewport width is reduced, the text-box controls line up vertically (as expected) but the "Search" label and the "search" button stay on the right of the page.
Why are some elements aligning vertically while some others are not?
This does not happen if I remove the topmost div. However, I do need it to display the controls on the right side of the page.
I am wondering if there is a way to make all the controls in the set work consistently. Regards.

Answer 1

Use the * selector to choose all elements within the div form-inline
.form-inline *
{
/* Desired style here */
}

Answer 2

Best way to do it is by using the * selector, this says that the style will be applied to all the elements within the div class form-inline
.form-inline *
{
/* Place your styling stuff here */
}

Answer 3

Setting left-align style on label as well as the button solved my problem:
<div class="form-group" style="text-align:right">
<label for="Search">Search</label>
</div>
Now, when the viewport is wide enough, all the elements are shown in one line on the right side of the view port. When the viewport reduces in width, all the controls are shown vertically as left-aligned.