JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div id="prioritiesWrapper">
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title; it's longer than the others and wraps</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
    <div class="priority"><div class="img">Img here</div><div class="title">This is my priority title</div></div>
</div>

CSS

#prioritiesWrapper
{
    color: white;
    background-color: blue;
	margin: 0 auto;
}

#prioritiesWrapper .priority .img
{
	float: left;
    height: 50px;
	margin: 0 15px 0 0;
}

#prioritiesWrapper .priority .title
{
	margin: auto 0;
}

#prioritiesWrapper div.priority
{
	width: 350px;
    height: 80px;
	display: inline-block;
	margin: 10px 30px;
	padding: 10px;
	background-color: black;
	text-align: left;
	font-weight: bold;
	line-height: 2em;
    vertical-align:middle;
}