JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer part">
    <div class="part">IKON</div>
    <div class="part">Tekst</div>
    <div class="part" style="padding-right: 15px;">-></div>
    <div class="bottom-button-line">
        </div>
</div>


<button>
    IKON Tekst
</button>

CSS

.part
{
    display: inline-block;
}

.outer
{
    border:1px solid black;
    padding-bottom: 0px;
    padding-top: 5px;
}

.outer .part:first-child
{
    padding-left:15px;
}

.outer > .part:last-child
{
    padding-right: 15px;
    margin-right: 15px;    
    background-color: red;
}

.bottom-button-line
{
    margin-top: 5px;
    height: 5px;
    background-color: blue;
}



button {
    border: 1px solid #000;
    background: 0;
    background-color: #fff;
    font-size: 16px;
    font-family: Times Roman;
    padding: 0.28em 1em;
    -webkit-box-shadow: 0px 5px 0px 0px blue;
    -moz-box-shadow:    0px 5px 0px 0px blue;
    box-shadow:         0px 5px 0px 0px blue;    
}

button:after {
    content: "->";
    color: red;
    font-size: 16px;    
}