Three column layout – Aligning “Read More” link to the bottom of the column

<div class="row">
	<div class="container">
		<div class="wrap-box d-flex-row">
			<div class="box col-1">
				<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
				<p class="readmore-wrap"><a href="#" class="read-more">Read more</a></p>
			</div>
			<div class="box col-2">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				<p class="readmore-wrap"><a href="#" class="read-more">Read more</a></p>
			</div>
			<div class="box col-3">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat at libero at iaculis. Cras elementum ante at tellus faucibus, non pulvinar turpis eleifend. Aliquam eget nisi sollicitudin, hendrerit diam a, auctor mauris. Duis enim lacus, tristique vitae metus quis, gravida maximus sem. Curabitur ut est faucibus, efficitur leo vel, feugiat elit. Mauris a rhoncus tortor. Duis ornare sagittis condimentum.</p>
				<p class="readmore-wrap"><a href="#" class="read-more">Read more</a></p>
			</div>
		</div>
	</div>
</div>

.container{
	width:1160px;
	max-width:90%;
	margin:20px auto
}
.d-flex-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.box{
	display:flex;
	flex-direction:column;
	flex:1;
	border:1px solid #ddd;
	padding:20px;
}
.readmore-wrap{
	margin-top:auto;
}
.read-more{
	text-decoration:none;
	padding:10px 15px;
	display:inline-block;
	background-color:#f3f3f3;
	color:inherit	
}
@media(max-width:680px){
	.d-flex-row{
		flex-wrap:wrap;
		flex-direction:column;
	}
	.box{
		flex:auto
	}
}