title: Use inline block on 2 elements inside a component in react
body: <p>I have a component with two elements passed to it. I want the two elements to be displayed side by side. I've tried to use display: inline-block in CSS but it won't actually put the two elements side by side. I want the elements to be the same size so each of them will take up 50% of the screen. </p>
  
  <p>I am finding react a bit tricky to style with CSS. Any advice how to make this work?
  This is my component. </p>
  
  <pre><code>class Dashboardbox extends React.Component {
  render(){
      return(
          &lt;div className="dashboardbox"&gt;
           &lt;Coursebox /&gt;
           &lt;Newsbox /&gt;
          &lt;/div&gt;
      );
  }
  }
  
  ReactDOM.render( &lt; Dashboardbox /&gt;, document.getElementById('dashboardbox'));
  </code></pre>
  
  <p>and my CSS</p>
  
  <pre><code>.course {
  background-color: lightgrey;
  margin-left: 20px;
  height: 80%;
  border-radius: 10px;
  font-family: arial;
  padding: 5px 10px 10px 10px;
  margin-top: 10px;
  }
  
  .dashboard {
  display: inline-block;
   }
  </code></pre>