JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<div id="fndtn-vs-cgrts">

<div class="row header">
<div>
<h2>
Foundation
</h2>
</div>
<div>
<h2>
Corporate Grants
</h2>
</div>
</div> <!-- end header row -->

<div class="row icons">
<div>
<img src="http://placehold.it/79x82/ff0000/ff0000" />
</div>
<div>
<td><img src="http://placehold.it/79x70/ff0000/ff0000" /></td>
</div>
</div> <!-- end icons row -->
<div class="row tabular">
<div class="fndtn">Charitable Donation</div>
<div class="cgrts">Charitable donation with employee participation in event (e.g., dinners, golf outings, runs/walks, etc.)</div>
</div>
<hr/>
<div class="row tabular">
<div class="fndtn">NO direct benefit back to Georgia Power Company
</div>
<div class="cgrts">DIRECT benefit back to Georgia Power Company
</div>
</div>
<hr/>
<div class="row tabular">
<div class="fndtn">CANNOT fulfill obligation of Georgia Power Company 
</div>
<div class="cgrts">Fulfills obligation of Georgia Power Company
</div>
</div>
<hr/>
<div class="row tabular">
<div class="fndtn">CANNOT control the use of funds donated to grantee
</div>
<div class="cgrts">Georgia Power Company may have input in the use of funds
</div>
</div>
<hr/>
</div>

CSS

#fndtn-vs-cgrts .row.header > h2 {
  text-align: center;
}
#fndtn-vs-cgrts div {
  text-align: center;
}
#fndtn-vs-cgrts .row {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  width: 100%;
  }
  
#fndtn-vs-cgrts .row > div {
  width: 50%;
}