title: Tailwind grid dynamic sidebar/navbar width with main 100% width
body: <p>I need a simple main div column 100% full.</p>
  
  <p>Sometimes a sidebar can appear, with dynamic width.</p>
  
  <h3>REPL: <a href="https://codesandbox.io/s/tailwind-dynamic-sidebar-kw1ku" rel="nofollow noreferrer">https://codesandbox.io/s/tailwind-dynamic-sidebar-kw1ku</a></h3>
  
  <p>In this example you can see I'm not able to change sidebar width (which has every time a new width value) and I'm not able to "stretch" main div to 100% width.</p>
  
  <p>How to do?</p>
  
  <pre><code>&lt;div class="min-h-screen grid grid-cols-12"&gt;
  
    &lt;div class="bg-green-500"&gt;
      &lt;div style={`width: ${randomWidth}px !important;`}&gt;
        Sidebar. This has dynamic width.
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="bg-red-500"&gt;
      Main. This has full width.
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>