Css grid - content inline, hide overflow - html

Question

This is my html code
<div class="longtext">
<div class="image">
<img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt="">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="buy">
$ 3053
</div>
</div>
I would like to achieve to display all content inline, something like this.
Image have defined dimensions, .text and .buy width is unknown. .buy must be always displayed whole and at single line. .text must be displayed on one line as well but its not necessary to display whole text.
Here is my css yet
.longtext {
border: 1px solid red;
overflow: hidden;
}
.longtext > * {
float: left;
}
.longtext img {
height: 60px;
width: 60px;
}
.buy {
float: right;
border: 1px solid blue;
}
.text {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Codepen

Answer 1

I would use flex on the parent and align-items to align them vertically. Add flex-grow: 1 to .text (or flex: 1 0 0; for short) so it fills the available space, and add the overflow/ellipsis to the p. Then you can remove the floats from everything else. Also added white-space: nowrap to the .buy element so the space between the $ and numbers won't break.
.longtext {
border: 1px solid red;
display: flex;
align-items: center;
}
.longtext img {
height: 60px;
width: 60px;
vertical-align: top;
}
.buy {
border: 1px solid blue;
}
.text {
border: 1px solid black;
overflow: hidden;
}
.text p {
text-overflow: ellipsis;
overflow: hidden;
}
.buy, .text {
white-space: nowrap;
}
<div class="longtext">
<div class="image">
<img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt="">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="buy">
$ 3053
</div>
</div>

Answer 2

.longtext {
border: 1px solid red;
display: flex;
}
.longtext img {
height: 60px;
width: 60px;
}
.longtext div{
vertical-align: top;
}
.buy {
border: 1px solid blue;
}
.text {
border: 1px solid black;
overflow: hidden;
}
.text p {
text-overflow: ellipsis;
overflow: hidden;
}
.buy, .text {
white-space: nowrap;
}
<div class="longtext">
<div class="image">
<img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt="">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="buy">
$ 30530000
</div>
</div>
<div class="longtext">
<div class="image">
<img src="https://c1.staticflickr.com/8/7610/17149522281_3b6ae4c948_b.jpg" alt="">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="buy">
$ 30500
</div>
</div>