JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-4">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">
    <div class="col-6">cost</div>
    <div class="col-6">button</div>
  </div>
</div>
<div class="col-4">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">
    <div class="col-6">cost</div>
    <div class="col-6">button</div>
  </div>
</div>
<div class="col-4">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">
    <div class="col-6">cost</div>
    <div class="col-6">button</div>
  </div>
</div>

CSS

* { box-sizing: border-box; }
[class*="col"] {
  float: left;
}
.col-4 {
  width: 33.33%;
  border: 1px solid teal;
}
.col-4:hover {
  transform: scale(1.4);
}
.col-6 {
  width: 50%;
}