JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c1">
  <div id="c2">
    <div id="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
    <div id="d2">Blah blah blah. Blah blah blah - blah blah blah. Blah-blah-blah. Test test test test test test.</div>
  </div>
</div>

CSS

div {
    border: 1px solid;
}

#c1 {
    height: 400px;
    width: 400px;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

#c2 {
    width: 350px;
    position: relative;
}

#d1 {
    width: 200px;
    position: absolute;
    left: 50%;
    top: -20px; /* distance between #d1 and #d2 */
    -webkit-transform: translate(-50%, -100%);
}

#d2 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}