I would appreciate some feedback on this single price grid component project completed using HTML and CSS.
I am trying to recreate the content shown by this image: https://res.cloudinary.com/practicaldev/image/fetch/s--FzGw2rbZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3y0bhisv135j7979dk3m.jpg
HTML file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Price Grid</title>
</head>
<body>
<div class="container">
<div class="description">
<h2>Join our community</h2>
<h3>30-day, hassle-free money back guarantee</h3>
<h3>Gain access to our full library of tutorials along with expert code reviews.
<br>Perfect for any developers who are serious about honing their skills.
</h3>
</div>
<div class="pricing">
<h3>Monthly Subscription</h3>
<h2>$29 per month</h2>
<h2>Full access for less than $1 a day</h2>
<button>Sign up</button>
</div>
<div class="featuredContent">
<h2>Why us?</h2>
<ul>
<li>Tutorials by industry experts</li>
<li>Peer & expert code review</li>
<li>Coding exercises</li>
<li>Access to our GitHub repos</li>
<li>Community forum</li>
<li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</div>
</div>
</body>
</html>
CSS File
html {
margin: 0;
padding: 0;
font-family: 'Abel', sans-serif;
}
body {
background-color: rgb(230, 230, 230);
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 500px;
border: 20px solid rgb(20, 148, 20);
border-radius: 25px;
}
.description {
padding: 20px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.pricing {
position: relative;
float: left;
top: 5.5%;
height: 55%;
width: 50%;
color: white;
background-color: rgb(43, 179, 177);
text-align: center;
}
.featuredContent {
position: relative;
float: right;
top: 5.45%;
color: rgb(255, 255, 255);
background-color: rgb(74, 190, 189);
height: 55%;
width: 50%;
}
.featuredContent h2 {
text-align: center;
}
.featuredContent ul {
position: relative;
list-style: none;
left: 20%;
}