JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<a class="icon">&rarr;</a>
<a class="centered-box">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>

CSS

.centered-box {
  flex: 1;
  padding: 20px;
}

.container {
  position: relative;
  display: flex; 
  width: 8em; 
  align-items: center; 
  border:1px solid blue; 
  text-align:center;
}

.icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}