CSS create two lines of texts and align both to an iframe bottom
<p>this is my HTML:</p>

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

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

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

<pre><code>.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;
}
</code></pre>

<p>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?</p>