Take a look at this code snippet:
img {
float: left;
}
#inner {
height: 128px;
background-color: yellowgreen;
display: table-cell;
vertical-align: middle;
}
#content {
background-color: red;
}
<img src="http://cdn.memegenerator.net/instances/250x250/37934290.jpg" width="128" height="128" />
<div id="inner">
<div id="content">text text tertkl elknr tlken lsl kdmfsldkfmsldkfmslkd mfkndfln dflkfndg lkn</div>
</div>
The current configuration works as intended - the text is centered and moves to underline when the width is reduced. However, there is an issue where it appears too far from the image. Ideally, we want the vertical-align: middle; property to switch to vertical-align: top; when necessary. How can this be achieved without utilizing jQuery?