JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo">
    <div class="m1">M</div>
    <div class="m3">edia</div>
    <div class="m2">M</div>
    <div class="m4">antra</div>
</div>

CSS

.m1, .m2 {
    height:40px;
    width:40px;
    float:left;
    background-color:#aaa;
}
.logo {
    cursor:pointer;
}
.m3, .m4 {
    width:0px;
    height:40px;
    overflow:hidden;
    float:left;
}

JavaScript

$(document).ready(function () {
    $(".logo").mouseenter(function () {
        $(".m3, .m4").animate({
            width: '40'
        }, 300);
    }).mouseleave(function () {
        $(".m3, .m4").animate({
            width: '0'
        }, 300);
    });
});