CSS: prevent item lowering with multiple text lines - css

Question

First of all excuse me if the title is unclear. I dont really know how to describe the problem which also makes it harder for me to google for solutions.
I've inserted my code in a fiddle so I can explain it better:
https://jsfiddle.net/Lzbavyu9/2/
I want the X always to be on the same height as the first line of the text. I've tried things as vertical-align but that doesnt work. It always moves down with the last line of the text.
code is below
<div class="panel-title">
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<span class="collapse-button">
<i class="pull-right" aria-hidden="true">X</i>
</span>
</div>
CSS
.panel-title {
width: 200px;
}
.panel-title h3 {
margin: 8px 0 -1em 0;
display: block;
width: calc(100% - 30px);
}
.panel-title span.collapse-button {
padding: 0px;
height: 25px;
margin: 0px;
display: block;
}
.collapse-button i {
width: 25px;
height: 15px;
}
.pull-right {
float: right !important;
}
Does anybody have an idea?
Thanks in advance

Answer 1

div h3{
display: inline-block;
max-width: 10em;
vertical-align: top;
margin: 0;
}
<div>
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<i>X</i>
</div>

Answer 2

Flexbox can do that
* {
margin: 0;
padding: 0;
}
.panel-title {
width: 200px;
display: flex;
margin: 1em;
border: 1px solid grey;
}
.panel-title h3 {
display: block;
flex: 1;
}
.panel-title span.collapse-button {
padding: 0px;
height: 25px;
margin: 0px;
display: block;
}
.collapse-button i {
width: 25px;
height: 15px;
}
<div class="panel-title">
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<span class="collapse-button">
<i aria-hidden="true">X</i>
</span>
</div>
<div class="panel-title">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem alias est ex, reiciendis expedita natus distinctio quos ipsam cumque soluta, iusto incidunt molestias mollitia, ullam labore aliquid iure inventore voluptate!</h3>
<span class="collapse-button">
<i aria-hidden="true">X</i>
</span>
</div>

Answer 3

You should use position: absolute on your .collapse-button class. Add position: relative in your .panel-title class. If you want to adjust the position of the X, you can change the values of top, right, left and bottom properties in .collapse-button class
.panel-title {
width: 200px;
}
.panel-title h3 {
margin: 8px 0 -1em 0;
display: block;
width: calc(100% - 30px);
position: relative;
}
.panel-title span.collapse-button {
padding: 0px;
height: 25px;
margin: 0px;
display: block;
position: absolute;
top: 10px;
right: 0;
}
.collapse-button i {
width: 25px;
height: 15px;
}
.pull-right {
float: right !important;
}
<div class="panel-title">
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<span class="collapse-button">
<i class="pull-right" aria-hidden="true">X</i>
</span>
</div>

Answer 4

Put this:
.panel-title { position: relative; width: 200px; }
and
.collapse-button i { position: absolute; top: 5px; right: 0px; }