JSFiddle - React, Tailwind, and code Playground

by Alexander Tartmin

HTML

<a href="#" class="btn-open-live">Open <span class="live">live</span></a><a href="#" class="btn-demo"> Demo</a>

CSS

a {
    display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
    padding: 8px 28px;
font-size: 12px;
line-height: 1.5;
border-radius: 0;
}
.btn-open-live {
    background: #ff0;
    float: left;
    display: block;
    width: 120px;
}
.btn-demo{
    background: #f00;
    float: left;
    display: block;
    width: 93px;
}

JavaScript

$('.btn-demo').hover(function () {
        $(this).animate({
            'width': 120
        }, 150);
        $('.btn-open-live').animate({
            'width': 93 
        }, 150);
        $('.live').prependTo($(this));
    },
    function () {
        $('.btn-open-live').animate({
            'width': 120
        }, 150);
        $(this).animate({
            'width': 93
        }, 150);
        $('.live').appendTo($('.btn-open-live'));
    });