Make a text and select the dropdown horizontal

Question

I am trying to make the text as a shortcut and select a dropdown on the same line. When I use display: inlinefor div, it works. But when I use the class form-controlin select, it breaks. Here is an example

Here is the code

<div class="col-md-2">
  <div> <span>test</span></div>

  <div>
    <select class="form-control" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>

I want to do this on one line.

Answer 1

Add display: flexfor container.

.flex {
  /* become a flex container */
  /* its children will be flex-items */
  display: flex;
  /* align items on font baseline */
  align-items: baseline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-2 flex">
  <div><span>test</span></div>

  <div>
    <select class="form-control" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>

Run codeHide result

Answer 2

flex , decendants , align-items: center, , margin-right , select.

.input-container {
  display: flex;
  align-items: center;
}

.input-label {
  margin-right: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-2 input-container">
  <label class="input-label">test</label>
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Hide result

Answer 3

Bootstrap, Bootstrap: .

, 2 <div> .row, , , , . :

<div class="row">
    <div class="col-your_break_point_unit">
        <!-- your text here -->
    </div>
    <div class="col-your_break_point_unit">
        <select>
            <!-- your select options here -->
        </select>
    </div>
</div>

Answer 4

<div class="form-horizontal">
<label>Country</label>
<select>
<option>Nepal</option>
<option>India</option>
<option>China</option>
</select>

. - .