Подскажите пожалуйста, как в данном коде сделать, чтобы тест выпадал плавно вправо
.content {
display: inline-block;
vertical-align: top; /* по умолчанию baseline */
background: #ccc;
padding: 5px;
}
.hide {
display: none;
background: #000;
color: #fff;
text-align: center;
}
.content:hover .hide {
display: block;
}
<div class="content">
hover
<p class="hide">
Text
</p>
</div>
<div class="content">
hover
<p class="hide">
Text
</p>
</div>
<div class="content">
hover
<p class="hide">
Text
</p>
</div>