JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" class="x">
    passe o mouse
</div>
<div id="b" class="x">
    <img style="margin: 15px 0 0 15px" width="50px" height="50px" src="http://www.gamers4fun.nl/uploads/monthly_08_2014/post-5-0-42159100-1409472635.png">
</div>

CSS

/* Quero que funcione deste modo */
.x {
    display: inline-block;
}
#a {
    position: fixed;
    width: 20px;
    height: 100px;
    background-color: red;
    transition: 0.5s;
}
#a:hover {
    width: 130px;
}
#b {
    float: left;
    margin-left: 30px;
    width: 100px;
    height: 100px;
    background-color: blue;
}