JSFiddle - React, Tailwind, and code Playground

by Ulugbek Aripov

HTML

<div class="parent">
<input class="child" type="checkbox" name="abc">
<span class="blockText">1. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam necessitatibus
            dignissimos saepe a molestiae, error cupiditate. Dolorem voluptates quae veniam vel ad iusto accusantium atque
            repellat? Qui omnis quia itaque!
 </span>
 </div>
 <br>
 <div class="parent">
 <input class="child" type="checkbox" name="abc2">
<span class="blockText">2. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam necessitatibus
            dignissimos saepe a molestiae, error cupiditate. Dolorem voluptates quae veniam vel ad iusto accusantium atque
            repellat? Qui omnis quia itaque!
 </span>
 </div>

CSS

.blockText {
  display: block;
  margin-left: 30px;
  margin-right: 40px;
}

.parent {
    position: relative;
}
  
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}