JSFiddle - React, Tailwind, and code Playground

HTML

<div class="true-false">
    <ol type="i">
        <li>
            <div class="question">
                <p>Always add water to chemicals as fast as possible.</p>
            </div>
            <div class="answer">test</div>
        </li>
        <li>
            <div class="question">
                <p>Always keep chemicals in their original container.</p>
            </div>
            <div class="answer">test</div>
        </li>
        
    </ol>
</div>

CSS

.true-false ol {

}
.true-false ol > li:before,
.true-false ol > li:after {
  content: " ";
  display: table;
}
.true-false ol > li:after {
  clear: both;
}
.true-false ol .question {
  width: 70%;
  padding-top: 0;
  float: left;
}
.true-false ol .answer{
    width: 10%;
    float: left;
}
p{
    padding: 0;
    margin: 0;
}