JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="activity">
    <span class="act-a"><span class="fa fa-square"></span></span>
    <span class="act-b">Not a button</span>
</div>

<button class="activity">
    <span class="act-a"><span class="fa fa-square"></span></span>
    <span class="act-b">Real button</span>
</button>

CSS

.activity {
    display: flex;
    -moz-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: inherit;
}

.act-a {
    order: 1;
}
.act-b {
    order: 0;
}

.