JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <a class="a">&rarr;</a>
  <a class="b">here <br> is a load of text.<br>I want it to be centered in the div,<br>not shifted to the right</a>
</div>

SCSS

div {
  position relative;
  display: flex; 
  justify-content: center;
  align-items: center; 
  max-width: 22em; 
  height: 22em;
  border:1px solid blue; 
  
  a.a {
    position: absolute;
    left: 0;
    align-self: center;
  }
  
  a.b {
    display: flex;
    justify-content: center;
    align-self: center;
    flex: 1;
  }
}