JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div class="col-container">
  <div class="col col-1">
    <h2>Column 1</h2>
    <p>Hello World</p>
    <span class="button">Button</span>
  </div>

  <div class="col col-2">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
        <span class="button">Button</span>
  </div>

  <div class="col col-3">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
        <span class="button">Button</span>
  </div>
</div>

CSS

body {
  font: 16px/1.5 Avenir Next, sans-serif;
}

.col-container {
    display: table;
    width: 100%;
    border-spacing: 10px;
}
.col {
    display: table-cell;
    padding: 1em 1em 3em;
    background: #EEE;
    position: relative;
}
.button {
   position: absolute;
   bottom: 1em;
   background: #E4477D;
   color: #FFF;
   display: block;
   width: auto;
   right: 1em;
   left: 1em;
   text-align: center;
   padding: 0.25em;
}