CSS文本向上移动

Question

我的网站上有这样的标题，如下所示：

当我重新调整窗口时出现问题：

我的文字正在向上移动，我希望它能够向下延伸。这是我的HTML代码：

            <div class="inner, header2">
                <div class="first">

                    <img src="images/clean/kim_icon.png" alt="" />
                </div>
                <div class="second">
                    <p class="section">S.I.M.B.A. (Smart Infant Management and Breath Aid)</p>
                </div>
            </div>

我的CSS：

.header2 {
text-align: left;
padding: 3em 6em 0em 6em;
overflow: hidden;
position: relative;
}

.first { //image
float: left;
}

.second { //text
float: left;
position: absolute;
bottom: 0em;
left: 12em;
}

p{
font-size: 2.75em;
margin-bottom: 1em;
line-height: 100%;
margin: 0 0 2em 0;
}

Answer 1

选项是使用flexbox。文本将尽可能放在底部。

.header2 {
  display: flex;
}

.second {
  align-self: flex-end;
}

p {
  font-size: 2.75em;
  margin: 0;
}

<div class="inner header2">
  <div class="first">
    <img src="http://placehold.it/100" alt="" />
  </div>
  <div class="second">
    <p class="section">S.I.M.B.A. (Smart Infant Management and Breath Aid)</p>
  </div>
</div>