JSFiddle - React, Tailwind, and code Playground

HTML

<div class='checks'><div class='moinfo'><h2 class='hmovie'>Movie Information</h2><div class='cat'><div class='subcat'>Genre:</div><div class='dcont'>".$dummy[0]."</div></div>
	<div class='cat'><div class='subcat'>Year:</div><div class='dcont'>".$dummy[1]."</div></div>
	<div class='cat'><div class='subcat'>Running Time:</div><div class='dcont'>".$dummy[2]."</div></div>
	<div class='cat'><div class='subcat'>Language:</div><div class='dcont'>".$dummy[3]."</div></div>
	<div class='cat'><div class='subcat'>Subtitles:</div><div class='dcont'>".$dummy[4]."</div></div>
	<div class='cat'><div class='subcat'>Country:</div><div class='dcont'>".$dummy[5]."</div></div>
	<div class='lcat'><div class='subcat'>Awards:</div><div class='dcont'>".$dummy[6]."</div></div></div>
    
    <div class='role'><h2 class='hmovie'>Cast Information</h2><div class='cat'><div class='subcat'>Cast:</div><div class='dcont'>".$dummy[7]."</div></div>
	<div class='cat'><div class='subcat'>Director:</div><div class='dcont'>".$dummy[8]."</div></div>
	<div class='cat'><div class='subcat'>Writer:</div><div class='dcont'>".$dummy[9]."</div></div>
	<div class='cat'><div class='subcat'>Producers:</div><div class='dcont'>".$dummy[10]."</div></div>
	<div class='cat'><div class='subcat'>Music:</div><div class='dcont'>".$dummy[11]."</div></div>
	<div class='cat'><div class='subcat'>Cinematography:</div><div class='dcont'>".$dummy[12]."</div></div>
	<div class='lcat'><div class='subcat'>Editor:</div><div class='dcont'>".$dummy[13]."</div></div>
	<div class='lcat'><div class='subcat'>Sound:</div><div class='dcont'>".$dummy[13]."</div></div>
	</div></div>

CSS

.checks{ 
		width:100%;
        overflow:hidden;
    
	}

	.moinfo{ 
		background:#F29400;
		width:50%;
		padding-left:10px;
		padding-right:10px;
		margin-top:30px;
		color: white !important ;
		padding-bottom:20px;
		height:300px;
        float:left;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
	}
	
	.role{ 
		background:green;
		width:50%;
		padding-left:10px;
		padding-right:10px;
		margin-top:30px;
		color: white !important ;
		padding-bottom:20px;
		height:300px;
        display:block;
        float:left;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
	}
	
	.hmovie{ 
		border-bottom:3px dotted #93117E;
		color:white;
		width:200px;
	}
	
	.cat{ 
		float:left;
		width:100%;
		padding-bottom:3px;
		border-bottom:2px dotted white;
	}
	
	.cat{ 
		float:left;
		width:100%;
		padding-bottom:3px;
	}
	.subcat{ 
		float:left;
		width:40%;
	}
	.dcont{ 
		float:left;
		width:60%;
	}