JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item_wrap desc_set">
  <div class="item">
			<a href="http://hota2.local/stories/test5/"></a>
				<div class="img" style="background-image:url(https://www.google.com.au/url?sa=i&source=imgres&cd=&cad=rja&uact=8&ved=2ahUKEwjV17mUtNrcAhWKe7wKHbeYA28QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Frose%2F&psig=AOvVaw1NR09hLQCnrFENyjmVlXWO&ust=1533712963057699)"></div>
					<div class="text">
									
									<div class="title">test5</div>
									<div class="description" style="">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</div>
								</div>
								<div...

SCSS

.item_wrap{

			float:left;
			padding-bottom:48.5%;
			position:relative;
      background:grey;
				width:262.727px;
				padding-bottom:325.781px;
				.item .text{
					height:38%;
				}
			


			
			.item{
				display: block;
				height:auto;
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				margin:10px;
				border: 1px solid #e6e6e6;
				
				a{
					position:absolute;
					top:0;
					right:0;
					left:0;
					bottom:0;
					z-index:5;
				}

				.img{
					width:100%;
					height:0;
					padding-bottom:70%;
					background-size:cover;
					background-position:center;
					display:block;
          background:yellow;
					//float:left;
					//display:flex;
				}
				.text{

					display:block;
					width:100%;
					//height:38%;
					height:23%;
					margin-left:0;
					margin-top:10px;
					margin-bottom: 10px;
					padding:5px;
					//float:right;
					//display:flex;
					position:relative;
	

					.tag{
						color:red;
						font-size:14px;
						font-weight:bold;
						line-height: 15px;
						margin-bottom: 5px;
					}
					.title{
						font-size:17px;
						line-height:20px;
						//font-family: cocogoose;
						font-weight:bold;
						max-height:120px;
						overflow:hidden;
					}
					.description{
						margin-top:5px;

						line-height: 17px;
						font-size: 14px;
            height:255px;
            background:green;
					}

				}
				.date{
						position:absolute;
						bottom:-10px;
						padding:0 10px;
						right:5px;
						font-style:italic;
						background:rgba(255,255,255,1);
						font-size:13px;
						//border:1px solid #e6e6e6;
				}
			}

		}