Make a text and select dropdown horizontal

Question

I am trying to make a text like label and select dropdown in the same line. When I use display: inline for both divs it works. But when I use form-control class in select it breaks. Here is the 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 make it in same line.

Answer 1

Add display: flex for container.

.flex {
  /* become a flex container */
  /* its children will be flex-items */
  display: flex;
  /* align items on font's 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>

Answer 2

You can use flex on the container to make it's decendants become flex-items, align-items: center to center them, and have a margin-right on the label to have a nice spacing between it and the select element.

.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>