JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<div class="plan_details_wrapper add_cc">
<h2 class="plan_title">Your Plan Details</h2>

<div class="plan_details">

  <div class="row">
    <p>Coverage ID:<br />
    <span>[coverage_id]</span></p>
    <p>No Cost Coverage:<br />
    <span>[no_cost_coverage]</span></p>
</div>

<div class="row">
<p>Name:<br />
<span>[first_name] [last_name]</span></p>
<p>Additional Coverage:&nbsp;<br />
<span>[additional_coverage]</span></p>
</div>

<div class="row">
<p>Enrollment Date:<br />
<span>[enrollment_date]**</span></p>

<p>Coverage Type:<br />
<span>[coverage_type]</span></p>
</div>

<div class="row">
<p>Insurance Type:&nbsp;<br />
<span>[product_full_name]</span></p>
<p>Premium Amount:&nbsp;<br />
<span>[premium_amount]</span></p>
</div>

<div class="row">
<p>Financial Institution Name:<br />
<span>[client_name]</span></p>
</div>





</div>

</div>

CSS

.plan_details_wrapper {
  border: 0.063rem solid red
  background-color: #fff
  border-radius: 0.25rem;
  box-shadow: 0 0.063rem 0.063rem rgb(0 0 0 / 5%);
  font-family: $font-lato;
  margin: auto;
}
.row{
  display: flex;
    justify-content: space-between;
}