JSFiddle - React, Tailwind, and code Playground

by saminath_krisna

HTML

<div class="mainContainer">
  <div class="wholeNumber">2</div>
  <div class="numberContainer">
    <div class="numerator">4</div>
    <div class="denominator">5</div>
  </div>
  <div class="operator">=</div>
  <div class="wholeNumber">2</div>
  <div class="operator">+</div>
  <div class="numberContainer">
    <div class="numerator">4</div>
    <div class="denominator">5</div>
  </div>
</div>

CSS

.mainContainer {
  display: flex;
  flex-direction: row;
}

.mainContainer > * {
  padding: 5px;
  /* border: 1px solid red */
}

.numberContainer > div {
  padding: 5px;
  width: 15px;
  justify-items: center;
  text-align: center;
}

.numerator {
  border-bottom: 1px solid black;
}

.wholeNumber {
  display: flex;
  align-self: center
}

.operator {
  display: flex;
  align-self: center
}