Show remaining Text on hover

Question

i want my text to expand and show all of its content when on hover for those contents longer than the div size. this is what i have so far but its opening the text sideways. i want it to show the text downwards and also it does the slide down effect for text that are not longer than the div width.

.show {
  padding: 5px 5px 5px 5px;
 border-radius: 10px;
 height: 20px;
 margin: 5px 1% 5px 1%;
 position: relative;
 transition: height 0.5s;
 -webkit-transition: height 0.5s;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 1px;
 line-height: normal;
 outline: 0 none;
 text-decoration: none;
 text-transform: uppercase;
}

.show:hover {
height: 100px;
overflow: visible;
}

Answer 1

Change Like This:

.show:hover {
   overflow: visible;
   white-space: normal;
   height: auto;
}

Full Code:

.show {
  padding: 5px 5px 5px 5px;
 border-radius: 10px;
 height: 20px;
 margin: 5px 1% 5px 1%;
 position: relative;
 transition: height 0.5s;
 -webkit-transition: height 0.5s;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 1px;
 line-height: normal;
 outline: 0 none;
 text-decoration: none;
 text-transform: uppercase;
}
.show:hover {
overflow: visible;
white-space: normal;
height: auto;
}

<div class="show">
    To get text to flow around an image, you need to use the float property, which takes an element out of the
normal flow of the document and moves it to one side to make room for whatever follows. So, if you float an
image to the left, the following text flows into the empty space created on the right. The same happens with blocklevel
elements. When you float a block-level element, as long as there’s sufficient space alongside the floated
block, the following elements are no longer forced onto a new line, and they can move up.
</div>