JSFiddle - React, Tailwind, and code Playground

by evanbriggs

HTML

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="block">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet.
    a</div>
  </div>
</div>

CSS

.outer {
      display:block;
      position:relative;
      width:320px;
    }
    
    .image {
      background-color:blue;
      width:320px;
      height:380px;
      display:block;
      position:relative;
      border-radius:5px;
    }
    
    /* Swapped the caption div to absolute, so it's always adhered to the bottom of the 'outer' container */

    .caption {
      display:block;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    
    /* Setup the 'block' div to do the actual '50%' manuevering based on the height of the  'caption' container with 'transform: translate(50%)' */

    .block {
      transform: translateY(50%);
      background-color:#FFFFFF;
      padding:24px;
      line-height:24px;
    }