JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="content" class="debug">
    <h1 id="Title">Title</h1>
    <div id="box" class="debug">
    	<div id="boxSection1" class="debug">
            Text
    	</div>
      <div class="divider">
        <span class="divider-text">Section</span>
      </div>
    	<div id="boxSectionDescription" class="debug">
       Water 
      </div>
    </div>
  </div>
</body>

CSS

body {
	font-family: "Helvetica Neue";
	text-align: center;
}

#content {
	width: 300px;
	margin: 0 auto;
}

.divider {
	margin-top: 6px;
	border-top: 2px solid gray;
	font-size: 10px;
	position: relative;
}

#box {
	border: 4px solid red;
	border-radius: 10px;
}

.divider-text {
	position: relative;
	border: 1px solid black;
	background-color: white;
	display: inline-block;
	padding: 0px 5px;
	margin-top: -200px;
}

#boxSection1 {
	padding-top: 20px;
	padding-bottom: 20px;
}

#boxSectionDescription {
	padding: 50px;
}