Hide a text when the container slides - overflow

Question

Why is my text not in
"Text overflow: ellipsis"?
I want my text to be directly in ellipsis and the excess text to be hidden when the containers slide.
You can find my code attached.
Thank you for help.
http://jsfiddle.net/5gLtraxh/12/
.wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description{ overflow:hidden;
text-overflow: ellipsis;
}
.description2{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.price{
position: absolute;
right: 0;
bottom: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
position: absolute;
right: -100px;
bottom: 0;
width: 100px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
right: 0;
}
.wrapper:hover .price {
transition: 1s;
right: 100px;
}
<div class="wrapper">
<h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
<p class="description2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla
</p>
<span class="price"></span>
<div class="slide"></div>
</div>

Answer 1

You cannot use position: absolute in this case since it will make the <div> no longer takes up any space. You can position them with float for example:
.wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description
{
white-space: nowrap; /*I am guessing you want this*/
overflow:hidden;
text-overflow: ellipsis;
}
.description2
{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.price
{
float: right;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
float: right;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
.wrapper:hover .price {
transition: 1s;
right: 100px;
}
<div class="wrapper">
<div class="slide"></div>
<span class="price"></span>
<h4 class="description">Lorem ipsum dolor sit amet, consectetur</h4>
<p class="description2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae nulla nihil fugit debitis assumenda reiciendis ab velit cupiditate blanditiis perspiciatis hic itaque reprehenderit, enim officia iusto, sint quod modi architecto!
</p>
</div>
Flexbox solution:
.wrapper {
display: flex;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
justify-content: space-between;
}
.description-wrapper {
min-width: 0;
}
.slider-wrapper {
display: flex;
}
.description
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.description2
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price
{
flex-shrink: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
flex-shrink: 0;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
.wrapper:hover .price {
transition: 1s;
}
<div class="wrapper">
<div class="description-wrapper">
<h4 class="description">Lorem ipsum</h4>
<p class="description2">
Lorem ipsum dolor sit amet</p>
</div>
<div class="slider-wrapper">
<span class="price">sd</span>
<div class="slide"></div>
</div>
</div>

Answer 2

Hi i noticed when i collapse the text the code is not working as expected. Items are no longer at the end of the wrapper.
As you can see in the code below.
.wrapper {
display: flex;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid black;
}
.description-wrapper {
min-width: 0;
}
.description
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.description2
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.price
{
flex-shrink: 0;
width: 100px;
height: 100%;
background: green;
transition: 1s;
}
.slide {
flex-shrink: 0;
width: 0px;
height: 100%;
background: blue;
transition: 1s;
}
.wrapper:hover .slide {
transition: 1s;
width: 100px;
}
<div class="wrapper">
<div class="description-wrapper">
<h4 class="description">Lorem ipsuctetur</h4>
<p class="description2">
Lorem ipsum dolor sit ame</p>
</div>
<span class="price">33$</span>
<div class="slide"></div>
</div>