HTML Question

CSS create two lines of texts and align both to an iframe bottom

this is my HTML:

<div class="container">
<iframe src="http://server.com" width="30" height="30" seamless="seamless" frameborder="0" scrolling="no" class="ifcheckif"></iframe>
<div class="texts">
first line of text, smaller <span>second line,aligned to the iframe bottom, bigger and bold.</span>
</div>
</div>


what I'd like to obtain, is the iframe aligned to the bottom of the two lines.

I cannot modify the HTML, but I can insert any CSS, actually everything is managed in this way:

.container{
text-align: center;
}

.ifcheckif {
display: inline;
}

.texts {
font-size: 0.688rem!important;
}

.texts span {
display: block !important;
font-size: 1.000rem !important;
font-weight: 700 !important;
padding-left: 30px;
}


but the result isn't what I want, actually the iframe is aligned to the top of the first line, while I would like it aligned at the bottom of the second line, or more more more better, in the "middle" of both.
May I achieve this with solely CSS? may I ask your help with this?

Answer

Set the display property to be inline-block rather than inline and do the same with the .texts div, like so:

.container{
  text-align:center;
}
iframe{
  background:#000;
  border:0;
  display:inline-block;
  height:60px;
  width:60px;
}
.text{
  display:inline-block;
}
.text span {
    display:block;
    font-weight:bold;
    padding-left:30px;
}
<div class="container">
  <iframe src="#"></iframe>
  <div class="text">first line of text, smaller <span>second line,aligned to the iframe bottom, bigger and bold.</span></div>
</div>

If that doesn't give you the exact positioning you want, you can use the vertical-align property to adjust it.