JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="myDiv">AUTO</div>    
</div>
<div>
    <div class="myDiv alternative">FIXED</div>
</div>

CSS

.myDiv {
    float: left;
    width: auto;
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    -i-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.myDiv.alternative {
    width: 100px;
}
.myDiv:hover {
    width: 200px; /* this should be auto + 20 pixels – how do i make this work? */
}