title: How do I place two JSX elements next to each other?
body: <p>I cannot figure out how to put these elements next to each other using inline styles.</p>
  
  <p>Right now, the buttons and drop down are all stacked on top of each other.
  I would like it to be </p>
  
  <pre><code>Test Run Information                     | Previous | Show 25 | Next | 
  </code></pre>
  
  <p>all within the same row.</p>
  
  <p>I am using React with CoreUI. Here is the CardHeader below, along with a screenshot</p>
  
  <pre><code>&lt;CardHeader style={{alignItems:"center"}}&gt;
  
  &lt;h5 style={{float:"left",marginTop:10}}&gt; {this.props.header} &lt;/h5&gt;
  &lt;nav style={{float:"right",marginTop:10}}&gt;
      &lt;ul class="pagination" &gt;
          &lt;li class="page-item"&gt;&lt;a class="page-link" href="javascript:void(0)" onClick={() =&gt; {this.prevPage()}}&gt;Previous&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;Input type="select" name="selectSm" id="SelectLm" bsSize="sm"  &gt;
      &lt;option key="Default" value=''&gt;Show 25&lt;/option&gt;
      &lt;/Input&gt;
      &lt;ul class="pagination"&gt;
          &lt;li class="page-item"&gt;&lt;a class="page-link" href="javascript:void(0)" onClick={() =&gt; {this.nextPage()}}&gt;Next&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/CardHeader&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/a3xEX.png" rel="nofollow noreferrer">Current hideous layout</a></p>
  
  <p>There is way too much extra space and misalignment. I would like everything in line.</p>
  
  <p>Thank you</p>