JSFiddle - React, Tailwind, and code Playground

by Todd Padwick

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

body {
  background-color:#FFFFFF;
}
.outer {
  display:block;
  position:relative;
  width:320px;
}

.image {
  background-color:blue;
  width:320px;
  height:350px;
  display:block;
  position:relative;
  border-radius:5px;
}

.caption {
  position:absolute;
		bottom:0; right:0; left:0;
 
}

.caption::before {
      background-color: #FFFFFF;
		content:"";
		position:absolute;
		top:50%; left:0; right:0; bottom:-1px;
    background-color#FFFFFF;
    display:block;
}

.block {
  position:relative;
  background-color:#FFFFFF;
  padding:24px;
  left:5%;
  line-height:24px;
  width: 60%;
  border-radius: 5px;
  margin: 0 auto;
  display:inline-flex;
  box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.05);
}

JavaScript

$(document).ready(function() {
	promoCaption();
});

$(window).resize(function() {
	promoCaption();
});

function promoCaption() {
	//allow caption to sit half way on bottom edge of promos while keeping their ratio. Purely cosmetic
	$(".outer").each(function() {
		// get caption height
		var captionHeight = ($(this).find(".caption").height());
		// get caption offset by halfing its height
		var captionOffset = captionHeight / 2;
		// apply caption offset as padding bottom to the promo container
		$(this).css("padding-bottom", captionOffset);
	});
}