title: How to set 66% area to one element and 33% and 33% to the other two elements using flexbox?
body: <p>I want to set the <code>order id</code> on the very left and set the rest of the two to the very right of the div. The <code>total</code> and <code>view</code> elements should have equal space between them but should be to the right. <code>justify-content:space-between</code> sets equal space in between them and flex-grow or shrink is not working in my case. Am i doing something wrong? please help.</p>
  
  <pre><code>&lt;div layout="row" layout-align="space-between" class="orders-table-header"&gt;
    &lt;p class="orders-table-text text-center" style="flex-shrink:2"&gt;ORDER ID&lt;/p&gt;
    &lt;p class="orders-table-text text-center" style="flex-grow:1"&gt;TOTAL&lt;/p&gt;
    &lt;p class="orders-table-text text-center" style="flex-grow:1"&gt;VIEW&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>