JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider__item trending">
					<div class="trending__item">
						<img src="images/jacket.jpg" alt="" class="trending__img">
					</div>
					<div class="trending__item item-text">
						<h5 class="trending__h5">NATHAN STEWART jacket</h5>
						<div class="trending__col">Summer/Autumn Collection
							<hr>
						</div>
						<div class="trending__text">
							Classic Nathan Stewart Jacket from his latest collection.
							This item is loved by many just because of it’s simle style.
							Simple lines,lovely texture,it suits almost everybody. 
							It comes in six different colors,and all sizes.
						</div>
						<div class="trending__span">FASHION tip:</div>
						<div class="trending__text">
							With this jacket,Nathan Stewart sunglasses go hand in hand!
						</div>
						<form>
						<div class="trending__input">
						<ul class="trending-ul">
							<li class="trending-li">
								<input type="radio" name="m" id="button1"/>
								<label id="hw1" for="button1">M</label>
							</li>
							<li class="trending-li">
								<input type="radio" name="l" id="button2"/>
								<label id="hw2" for="button2">L</label>
							</li>
							<li class="trending-li">
								<input type="radio" name="xl" id="button3"/>
								<label id="hw3" for="button3">XL</label>
							</li>
							<li class="trending-li">
								<input type="radio" name="xxl" id="button4"/>
								<label id="hw4" for="button4">XXL</label>
							</li>
						</ul>
					</div>
					<div class="trending__shop">
						<ul class="trending-ul">
							<li class="trending-li">
								<button class="trending__button">SHOP NOW</button>
							</li>
							<li class="trending-li">
								<button class="trending__button">SIZE GUIDE</button>
							</li>
						</ul>
					</div>	
					</form>
					</div>	
				</div>

CSS

.trending
{
	display: block;
	padding-top: 0;
}
.trending__item
{
	float: left;
	text-align: left;
}
.item-text
{
	width: 45%;
	padding-left: 30px;
}
.trending__img
{
	max-width: 100%;
}
.trending__h5
{
	font-family: 'Lato', sans-serif;
	color: #dc0000;
	font-size: 1.8rem;
	text-transform: uppercase;
	padding-top: 15px;
}
.trending__col
{
	font-weight: 400;
}
.trending__col hr
{
	width: 30px;
	height: 1px;
	background: #000;
	border: none;
	margin: 25px 0;
}
.trending__text
{
	line-height: 25px;
}
.trending__span
{
	text-transform: uppercase;
	margin-top: 25px;
}
input[type="radio"]
{
	display: none;
}
label
{
    width: 50px;
    height: 26px;
    border: 1px solid #000;
 }
 label, .trending__button
 {
 	display: block;
    background: transparent;
    text-align: center;
    cursor: pointer;
    padding: 0.7em ;
    text-transform: uppercase;
    color: #000;
    font-size: 0.99999rem;
    font-weight: 700;
 }
 .trending__button
 {
 	width: 172px;
    height: 50px;
    text-decoration: none;
    border: 1px solid #000;
  }
 input {
    float: left;
    position: relative;
    top: 0.5em;
    left: 0.5em;
}
[id^=button]:checked + label, .trending__button:hover{
  background: #333;
  color: #fff;
}
.trending-ul
{
	display: inline;
}
.trending-li
{
	display: inline-block;
	margin-right: 20px;
}
.trending__input
{
	padding-top: 90px;
}
.trending__shop
{
	 margin: 30px 0;
}