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">
    
    
<span class="ctr"><span class="lft">\(1+2\ \) </span> \(=\) <span class="lft"> \(\ 3\)</span></span><br>
<span class="ctr"><span class="lft">\(1+5\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span><br>
<span class="ctr"><span class="lft">\(1 + 3 + 2\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span>


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

CSS

.ctr{
	position: absolute;
	left: 40%;
	}
.lft{
	position: relative;
	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}