JSFiddle - React, Tailwind, and code Playground

by Sushil Mahajan

HTML

<div class="portfolioIncomeContainer">
<div class="row">	
<div class="quarterlyIncomeColumn"> <div class="headerValue">Q1</div><div class="dollarValue">$90000</div></div><div class="quarterlyIncomeColumn"> <div class="headerValue">Q2</div><div class="dollarValue">$4066567666</div></div>
</div> 
<div class="row">
    <div class="quarterlyIncomeColumn"> <div class="headerValue">Q3</div><div class="dollarValue">$8056445</div></div><div class="quarterlyIncomeColumn"> <div class="headerValue">Q4</div><div class="dollarValue">--</div></div>
</div>
<div class="row">
    <div class="quarterlyIncomeColumn"> <div class="headerValue">YTD</div><div class="dollarValue">$210</div></div></div>
</div>

CSS

.portfolioIncomeContainer {
        width: 650px;       
        border:3px solid blue;
        min-height: 70px;
    }
.quarterlyIncomeColumn {
    border:1px solid red;
		float: left;
		min-width: 90px;
		height: 70px;
		padding-right: 5px;
	}
	
	.headerValue {
		width: 100%;
		font-size: 18px;
	}
	
	.dollarValue {
		width: 100%;
		font-size: 24px;
	}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-width : 550px) {
/* Styles */
    .portfolioIncomeContainer {
        width: 280px;
        border:3px solid blue;
        display: table;
    }
    .quarterlyIncomeColumn {
        display: table-cell;
        float: none;
    }
    .row {
        display: table-row;
        
    }
}