JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main-body">
    <div class="container">
      <div class="left-side">
              </div>
      <div class="right-side">
        <h5>PERFUME</h5>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p class="content">A floral, solar and voluptous interpretation composed bu oliver polge,Perfumer-Creator for the house of chanel</p>
        <div class="price">
          <h1 class="new-price prices">$149.99</h1>
          <p class="old-price prices">$169.99</p>
        </div>
        <button class="btn">
          <i class="fa fa-shopping-cart" style="font-size:16px"></i> Add To Cart
        </button>

      </div>
    </div>
  </section>

CSS

:root {
  --Dark-cyan: hsl(158, 36%, 37%);
  --Cream: hsl(30, 38%, 92%);
  --Very-dark-blue: hsl(212, 21%, 14%);
  --Dark-grayish-blue: hsl(228, 12%, 48%);
  --White: hsl(0, 0%, 100%)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 14px;
  background-color: var(--Cream);
  color: black;
}

.container {
  background-color: var(--White);
  width: 33%;
  height: 33%;
  display: flex;
  align-items: strecth;
  justify-content: center;
  overflow: hidden;
  margin: 4rem auto;
}

.left-side {
  width: 50%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-height: 100%;
  background-image: url("https://images.unsplash.com/photo-1611915387288-fd8d2f5f928b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80");

}

.left-side img {
  width: 100%;
  object-fit: cover;
}

.right-side {
  width: 50%;
  height: 100%;
  padding: 2rem;
}

h5 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  letter-spacing: 0.4rem;
  color: var(--Dark-grayish-blue);
  margin: 0 0 2em 0;
}

h1 {
  font-family: "Fraunces", serif;
  font-weight: 700;
  letter-spacing: 0.07rem;
}

.content {
  font-family: "Fraunces", serif;
  font-weight: 500;
  color: var(--Dark-grayish-blue);
  margin: 1.75em 0;
  line-height: 1.5;
}

.prices {
  font-family: "Fraunces", serif;
  display: inline;
  margin: 0 0.5em;
}

.old-price {
  text-decoration: line-through;
}

.new-price {
  font-weight: 700;
  color: var(--Dark-cyan);
}

.btn {
  padding: 0.5em 1.8em;
  background-color: var(--Dark-cyan);
  color: var(--White);
  width: 95%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 1.75em 0 0 0;
}

.btn:hover {
  opacity: 0.5;
}