title: tailwind horizontal line on right and left side of a div
body: <p>I'm trying to create a line on the right side and left side of the test div/border, but cannot figure out a way how to do it. There are not any sorurces online and thought someone might know how to.</p>
  <p>The drawn yellow lines are supposed to be the lines.</p>
  <p><a href="https://i.stack.imgur.com/tenH9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tenH9.png" alt="img" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Tailwind --&gt;
  &lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"&gt;
  
  
  &lt;!-- Body --&gt;
  &lt;div class="grid grid-cols-12 mb-20"&gt;
    &lt;div class="col-span-5 text-right"&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="col-span-2 mx-auto mt-10"&gt;
      &lt;div class="sm:block w-0.5 bg-black absolute h-full left-1/2 transform -translate-x-1/2"&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="col-span-5 pr-1"&gt;
      &lt;div class="border rounded-full bg-black border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center mt-10"&gt;&lt;/div&gt;
  
      &lt;div class="border-2 border-black p-4 lg:p-4 lg:max-w-md"&gt;
        &lt;p class="text-2xl text-center font-extrabold lg:text-6xl "&gt;test&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>