JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<p>何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして</p>
<div class="test"></div>
<p>何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして</p>
<div class="test success"></div>
<p>何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして 何かしらのテキストが書いてあるとして</p>
</div>

CSS

.main {
  width: 300px;
  padding: 20px 30px;
  background-color: #ccc;
   box-sizing: border-box;
}

.test {
  display: block;
  width: 300px;
  height: 50px;
  background-color: #111;
}
.success {
  position: relative;
  left: 50%;
  transform: translateX(-50%); 
}