Help with CSS & HTML

Hello everyone,

how can I modify the following code so the 90 is displayed within a perfect square and in line with everything else.

<div class="box fade-in two">
<div class="kl-frame">
  <div class="kl-left">
     <div class="star-ratings-sprite"><span style="width:90%" class="star-ratings-sprite-rating"></span></div>
     <div class="text-allign-css">
        <p style ="font-family:georgia,garamond,serif;font-size:15px; color:#404040;">Cigar Bible Score</p>
      </div>
  </div>
  
  <div class="kl-right">
       <p style = "padding-top: 5px;  font-family:Times,Optima;font-size:60px;font-style:it;color:#535353;">90</p>
  </div>
</div>
</div>

  Quote

.kl-frame {
    border: 7px double #1F1111;
  padding-left: 5px;
  padding-right: 5px;
   padding-top: 5px;
    display: flex;
    justify-content: center;
    max-width: 200px;
    margin: 0 auto;
}

.star-ratings-sprite {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
  font-size: 0;
  height: 21px;
  line-height: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 110px;
  margin: 0 auto;

Can you tag me in old question? @thecigarbible

I did already. I will do it again 😊