title: Bootstrap col wrapping
body: <p>I have a question about Bootstrap's <code>col</code> class.<br>
  I have this section of DOM:  </p>
  
  <pre><code>    &lt;div class="participant col-xl-6 col-12"&gt;
                   &lt;div class="row"&gt;
                      &lt;div class="container"&gt;
                          &lt;div class="select-participant container"&gt;
                              &lt;div class="row"&gt;
                                  // HERE
                                  &lt;input class="participant-name col search-input" placeholder="Choose user" onChange={this.onChange} value={this.state.userName}/&gt;
                                  &lt;div class="participants-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                      &lt;img class="mx-auto d-block" src="./images/small-arrow-down.svg" /&gt;
                                  &lt;/div&gt;  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>In this example, the <code>input</code> that has the <code>col</code> class pushes the <code>div</code> with the <code>img</code> all the way to the right, and they line up on the same, but the upper parent uses <code>col-xl-6</code>.<br>
  In this other example:</p>
  
  <pre><code>            &lt;div class="date-slider col-xl-4 col-12"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="container"&gt;
                          &lt;div class="container date-picker-container"&gt;
                              &lt;div class="row"&gt;
                                  //HERE
                                  &lt;input class="date-range col" onChange={this.onChange} value={this.props.initialValue}/&gt;
                                  &lt;div class="date-picker-small-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                      &lt;img class="mx-auto d-block" src="./images/small-arrow-down.svg" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>the parent is <code>col-xl-4</code>, and the <code>input</code>s width is 100% of the parent, and the <code>img</code> is being pushed on the next row, and what I want is to have it on the same row as the <code>input</code>. How can I solve this issue?</p>