JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
</head>

<div class="row">
  <div class="left">Stuff</div>
  <div class="main">

    <table>
      <tr>
        <td>
          <span class="lft">\(1+2\ \) </span>
        </td>
        <td>
          <span>\(=\) </span>
        </td>
        <td>
          <span class="rgt"> \(\ 3\)</span>
        </td>
      </tr>

      <tr>
        <td>
          <span class="lft">\(1+5\ \) </span>
        </td>
        <td>
          <span>\(=\) </span>
        </td>
        <td>
          <span class="rgt"> \(\ 6 + 2 - 2\)</span> </td>
      </tr>

      <tr>
        <td>
          <span class="lft">\(1 + 3 + 2\ \) </span> </td>
        <td>
          <span>\(=\) </span>
        </td>
        <td>
          <span class="rgt"> \(\ 6 + 2 - 2\)</span> </td>
      </tr>
    </table>

    <div class="space"></div>
  </div>

CSS

.lft {
  float: right;
  display: inline;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.main {
  flex: 80%;
  background-color: white;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.left {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
}

.space {
  padding: 100px
}