JSFiddle - React, Tailwind, and code Playground

HTML

<section class="carousel price-carousel">   <!--Price section -->
       <div class="container">
          
          <div class="price-Container">
                <div class="month-column">
                        <h4>Monthly</h4>
                        <p>$9.95</p>
                        <p class=”sub-text”>per computer</p>
                </div>
                 <div class="year-column"> 
        
                        <h4>Yearly</h4>
                        <p>$99</p>
                        <p class=”sub-text”>Save 20% when you pay anually</p>
                  </div>
          </div>
    </div>  
  </section>

CSS

.container {
    margin: 0 auto; 
    max-width:1050px;
}

.price-carousel{
	background-color: #eee;
	float:left;
	height:auto;
	margin-top: 10px;
	padding-bottom: 10px;
	width:100%;	
}

.price-carousel .month-column{
	background-color: #fff;
	border: 1px solid;
	float:left;
	height:120px;
	margin-left: 20%;
	margin-top:35px;
    text-align: center;
	width:240px;
}
.price-carousel .year-column{
	border: 1px solid;
	background-color: #fff;
	float: none;
	height:120px;
	margin-left:30%;
	margin-right: -10%;
	margin-top:35px;
	position: absolute;
	text-align: center;
	width:240px;
}
.price-carousel .year-column h4, .price-carousel .month-column h4{
	background-color: #676767;
	color: #fff;
	height: 25px;
	margin-top: 0px;
	padding-top:5px;
	width: 100%;
}