JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Row 1 -->
<div class="Col1"><h4>Art/Dance:</h4></div><div class="Col2"><p><span id="Art_S">$123</span></p></div>
 <!-- Row 2 -->
<div class="Col1"><h4>Cloth:</h4></div><div class="Col2"><p><span id="Cloth_S">$123</span></p></div>
 <!-- Row 3 -->
<div class="Col1"><h4>Education:</h4></div><div class="Col2"><p><span id="Education_S">$123</span></p></div>

CSS

.Col1 {
		  display:inline-block;
		  width:50%;
		  margin:0;
	  }
	  
	  .Col2 {
		  display:inline-block;
		  width:50%;
		  margin:0;
	  }