JSFiddle - React, Tailwind, and code Playground

HTML

<div class="benficiaryLs">
				<div class="each-beneficiary-info" beneficiaryid="6723654758">
					<div class="yellow-div"></div>
					<div class="beneficiary-name">
						Janice Black
					</div>
					<div class="beneficiary-bank">
						Alpha Bank
					</div>
					<div class="beneficiary-accno">
						A/C No.6723654758
					</div>
				</div>
				<div class="beneficiary-more-info-container" style="">
					
					<div class="each-beneficiary-extra-info" beneficiaryid="6723654758">
						<div class="empty-div"></div>
						<div class="beneficiary-name">&nbsp;</div>
						<div class="beneficiary-bank beneficiary-extra-roi">
							<div class="beneficiary-extra-field">Routing No.: 434344567</div>
							<div>Cincinati</div>
						</div>
						<div class="beneficiary-accno beneficiary-extra-savings">
							<div class="beneficiary-extra-field">Savings Account</div>
							<div class="beneficiary-extra-field"><span>Date of Registration: </span><span>09/10/2012</span></div>
						</div>
					</div>
					
					
				</div>

				</div>
<div id=content>
		<div class="mydiv">fafaffafafaf ffgasgagagaggag fafafafffgasgag agaggagfafafafffgasgagagagga gfafafafff gasgag agaggag afffgasgagagaggag</div>
		<div class="mydiv">fafafaf ffgasgagagaggagfafaf afffgasgagagaggagfafafa fffgasgagagaggagfafaf afffgas gagagagga gfafafafff gas gagagaggag</div>
		<div class="mydiv">fafafafffgasgfafa fafffgas gagagaggagfafafafff gasgagagagga gfafafafffgasg agagaggagfafafafffgasgagagaggaga gaga ggag</div>
</div>

CSS

#beneficiary-content-inner {height: 100%}
#beneficiary-content-inner .statement-head{background-color: #d4d4d4;padding: 6px 0 0 7px;height: 25px;}
#beneficiary-content-inner .cards-statement{margin: auto;width: 100%;clear: both;float: left;padding-bottom: 10px;}
#beneficiary-content-inner .tr-content .tr-row.tr-head {
    border: 1px solid #3F3F40;
    padding: 5px 0;
    background: #28282A;
    color: #D1D1D1;
}
#beneficiary-content-inner .tr-content {display: block;}
#beneficiary-content-inner .tr-content .tr-cell:nth-child(1) {width: 12%;padding-left: 1%;}
#beneficiary-content-inner .tr-content .tr-cell {float: left;text-align: left;vertical-align: middle;border-right: 3px dotted #8B8B8B;line-height: 2.5em;vertical-align: middle;}
#beneficiary-content-inner .tr-content .tr-head .tr-cell {border-right: 3px dotted #3F3F40;}
#beneficiary-content-inner .tr-content .tr-head .tr-cell:last-child {border-right: none;}
#beneficiary-content-inner .tr-content .tr-cell:nth-child(2) {width: 20%;padding-left: 1%;}
#beneficiary-content-inner .tr-content .tr-cell:nth-child(3) {width: 41%;padding-left: 1%;}
#beneficiary-content-inner .tr-content .tr-cell:nth-child(4) {width: 20%;border: 0;padding-left: 1%;}
#beneficiary-content-inner .tr-content .tr-content-outer {
    border: 1px solid #444444;
    background: #fff;
    color: #5B5B5B;
    overflow-y: auto;
    margin-top: 2px;
    position: relative;
}
#beneficiary-content-inner .tr-content .tr-content-inner {height: 300px;overflow-y: auto;}
#beneficiary-content-inner .tr-content .tr-content-inner::-webkit-scrollbar{width: 5px;background: transparent;}
#beneficiary-content-inner .tr-content .tr-content-inner::-webkit-scrollbar-thumb{-webkit-border-radius: 5px;border-radius: 10px;background: #4E4E4E;}
#beneficiary-content-inner .tr-content .tr-content-outer {color: #5B5B5B;}
#beneficiary-content-inner .tr-content .tr-content-outer .tr-row {border-bottom: 1px solid #DEDEDE;}
#beneficiary-content-inner .tr-content .tr-row...