JSFiddle - React, Tailwind, and code Playground

HTML

<a class="trigger">
    <div></div>
    <span>Some text</span>
</a>

<input type="button" value="button" />

CSS

a.trigger {
    width: 337px;
    height: 16px;
    padding: 2px 20px 2px 5px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.trigger, a.trigger:link, a.trigger:visited {
    display: inline-block;
    border: 1px solid;
    border-top-color: #BFD6F1;
    border-left-color: #BFD6F1;
    border-bottom-color: #9EBCE1;
    border-right-color: #9EBCE1;
    padding: 2px 18px 2px 7px;
    background-color: #FFF;
    text-decoration: none;
    cursor: pointer;
}

div{
    background-image: url('http://placekitten.com/200/300');
    height: 16px;
    width: 16px;
    display: inline-block;
    float: left;
}
a.trigger span {
    margin-left: 10px;
}
a.trigger, a.trigger:link, a.trigger:visited {
    cursor: pointer;
}

JavaScript

var toggle = 0;
$('input').on('click', function (e) {
    var text = (toggle) ? 'Really really really long text that is here, this is so long!' : 'this is shorter text';
    $('span').text(text);
    toggle = (toggle) ? 0 : 1;
});