JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
	<div class="item">
    <div class="item-pict">
      <img src="https://placeimg.com/480/480/any" alt="">
    </div>
		<div class="item-content">
			<h2>Title</h2>
			<p>Text text text text</p>
    </div>
  </div>
</div>

CSS

*{
	box-sizing: border-box;
}
.items{
	display: flex;
	flex-wrap: wrap;
	padding: 15px;
}
.item{
	max-width: 300px;
	border: 1px solid #ccc;
	margin: 2% 0;
}
.item-pict{
	height: 100px;
	padding: 15px;
	transition: height .3s ease;
}
.item-pict > img{
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	object-fit: cover;
}

.item-content{
	padding: 15px;
	background: #f7f7f7;
}
.item:hover .item-pict{
	height: 200px;
}