title: Grid layout with a row with 3 items that the width of each item is auto
body: <p>I have problems achieving this layout:</p>
  
  <p><a href="https://i.stack.imgur.com/a5ETh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a5ETh.png" alt="layout"></a></p>
  
  <p><a href="https://i.stack.imgur.com/I7fuS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I7fuS.png" alt="layout schema"></a></p>
  
  <p>I need that the width of the right and left elements be automatic and cover all the empty space on the right and the left of the element that is on the center.</p>
  
  <p>This is the closest thing that I could do, but the problem is that the width of the item of the center is fixed to 2 of the 12 units of the container and the right and left lines are fixed to 5 units each one</p>
  
  <pre><code>&lt;Grid container direction='row' alignItems='center' justify='center' style={{ width: '100%', textAlign:'center' }}&gt;
      &lt;Grid item xs='5'&gt;
          &lt;Divider /&gt;
      &lt;/Grid&gt;
      &lt;Grid item xs='2'&gt;
          &lt;span&gt;or&lt;/span&gt;
      &lt;/Grid&gt;
      &lt;Grid item xs='5'&gt;
          &lt;Divider /&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>I'm using the material-ui reactjs library.
  Can anyone help me? I'm open to help either using mterial ui library or with a css/js answer</p>