JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
            <div class="col s12 m3 l3">
                <a id="btn-individual" class="btn-redirect waves-effect waves-light" target="_blank">
                    DF Individual
                    <div class="icons"><span id="individual" class="material-icons">error_outline</span></div>
                </a>
            </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

CSS

.btn-redirect {
    display: block;
    text-align: left;
    font-size: 16px;
    color: #000;
    line-height: 50px;
    border-left: 3px solid #7455D4;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 0 -3px rgba(0,0,0,.12), 0 0 2px 0 rgba(0,0,0,.2);
    transition: box-shadow .25s;
    border-radius: 3px;
    padding: 16px;
}

#btn-individual {
  position: relative;
}

.icons {
    position: absolute;
    top: 0;
    right: 0;
}

.icons span.material-icons {
    color: #5622AC;
    position: absolute;
    z-index: 100;
    right: 0;
}