JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<div id="header">
      header content
    </div>

    <div id="all">
        <div id="left">
          left content
        </div>

        <div id="right">
          right content
        </div>
    </div>
    <footer>some words</footer>

CSS

#all{
    width: 55%;
    margin: 0 auto;
    display: flex;
}

#left{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#right{
    width: 20%;
}

footer{
    width: 100%;
    display: block;
    clear: both;
    text-align: center;
}