JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class="cartTotal">
<span>共 3 項商品，總計 <span calss="subTitle">Order Total </span><span class="salesPrice">NT$ 1,548</span></span>

</div>

CSS

.cartTotal {
  height: 78px;
  font-size:0;
  border-radius: 5px;
  border: solid 1px rgba(69, 66, 69, 0.1);
  text-align: center;
}

.cartTotal:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
}

 .cartTotal > span {
   display: inline-block;
   font-family: NotoSansCJKtc;
   vertical-align: middle;
   font-size: 18px;
   letter-spacing: 1px;
   text-align: center;
   color: #353235;
} 

.cartTotal .subTitle {
  font-family: Lato;
}

.cartTotal .salesPrice {
  font-weight: bold;
  color: #b40013;
}