[SOLVED] How do I make the text that is inside a half capsule shape?

How do I make the text that is inside a half capsule shape?

I am expecting the output like text that contain div has capsule shape. How to do?

<div class="bg-primary rounded-pill">
  <p class="text-right">TOTAL AMOUNT</p>
  <p class="text-right">200</p>
</div>

Solution

You can use flex box to centerlize it

here is what I did :

<style>
.title{
  margin:0px;
  height:35px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.price{
  margin:0px;
  border-top:solid 2px white;
  width:100%;
  height:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  
}

.container{
  background-color:#22B14C;

  width:300px;
  border-radius:14px;
  color:white;
}



</style>



<div class="bg-primary rounded-pill container">
  <p class="text-right title">
  TOTAL AMOUNT
  </p>
  <p class="text-right price">
  200
  </p>
</div>