title: Center div over another div
body: <p>First of all, I know there are a lot of questions with this title and I went through them.</p>
  <p>Here is my case and what I tried. I have some divs with dinamically added content. What I want is to place the status on the middle of the dotted border. My problem is that if the content of let's say first div has two lines, then my status won't be on the middle of the dotted line.</p>
  <p>How cand I make the status always stay in the middle of the dotted line regardless of other content?</p>
  <p>EDIT: This is the mobile view of the component, on the desktop view the status should stay on the bottom right side of the container.</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-css lang-css prettyprint-override"><code>.container {
    width: 500px;
    border: 1px solid black;
    position: relative
  }
  
  .border {
    border-bottom: 1px dashed black;
      margin-left: 0px;
      margin-right: 0px;
      position: relative;
      margin-top: 20px;
      margin-bottom: 20px;
      border-left: 0px;
  }
  
  .status {
    height: 32px;
    line-height: 32px;
    border-radius: 7px;
    text-align: center;
    padding: 0px 10px;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 13px;
    font-weight: bold;
    color: red;
    background-color: pink;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-60%, -50%);
  }
  .status-wrapper {
    margin-top: 0;
  }
  
  .text {
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="text"&gt;some text &lt;/div&gt;
    &lt;div class="text"&gt;some other text&lt;/div&gt;
    &lt;div class="border"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;more text&lt;/div&gt;
    &lt;div class="status-wrapper"&gt;
      &lt;div class="status"&gt;my status&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>