JSFiddle - React, Tailwind, and code Playground

HTML

<div id="layout-wrapper">
    <p>Above Content</p>
    <div id="content-wrapper">
        <p>Top Content Here</p>
        <p>&nbsp;</p>
        <hr class="rule" />
        <p>Bottom Content Here</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>
</div>

CSS

#content-wrapper {
      width: 400px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 8px;
      background-color: #ddd;
      position: relative;
    }
    .rule {
      background-color: #dbb328;
      height: 5px;
      position: relative;
      left: -1000px;
      width: 3000px;
    }