JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
<div class="row">

  <div class="col s1">
    <h1>Foo</h1>
  </div>

  <div class="col s11 ">
    <a href="#" class="btn"><i class="material-icons left">add</i> Add</a>
  </div>

</div>

CSS

.row {
  background: red;
  position:relative;
  justify-content:center;
}

.col{
  border:1px solid blue;
  position:absolute;
 

}

.col a i{
  display:inline-block;
  text-align:center;
}