JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:flex;flex-direction:column;height:100vh">
  <div style="flex: 1;background-color:yellow">
  
  </div>
  
  <div style="
    background-color:blue;
    color:white;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    
    margin: 0 auto;
    ">
  Why does this not span 100% width<br/>like any block elem would?
  </div>
</div>

CSS

body { margin:0;padding:0;}