title: Adding inline styles to react
body: <p>Currently I'm using react.js and I'm trying to get two div's to be side by side.
  Currently I'm trying to</p>
  
  <pre><code>&lt;div id="sidebar" style = "display:inline-block;" &gt;
    &lt;script src="build/sidebar.js"&gt;&lt;/script&gt;
  &lt;/div&gt;
  &lt;div id="map-canvas" style="display: inline-block; width: 20%; height: 50%; "&gt;&lt;/div&gt;
  </code></pre>
  
  <p>with sidebar.js as the where react is stored. This unfortunately doesnt work however as it just moves map-canvas to the side while sidebar isn't to the left of it; its on top. I've tried many various combinations w/ float as well and none of them seem to work</p>
  
  <p>Another option is to edit the sidebar.js code where I currently have</p>
  
  <pre><code>return &lt;div&gt;
    &lt;input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" /&gt;
    &lt;ul&gt;
      { libraries.map(function(l){
        return &lt;li&gt;{l.name} &lt;/li&gt;
      }) }
    &lt;/ul&gt;
  &lt;/div&gt;;
  </code></pre>
  
  <p>in which I try doing <code>return &lt;div style ="display: inline-block;"&gt;</code>
  However, in this case the generated html doesnt show up at all. I'm perplex to what I should try but react seems like it doesnt want to play nice with other div elements.</p>