问题出在float上。vertical-align: middle; line-height: 1;将修复此问题：

div {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
}

div:first-child {
  width: 55px;
}

<div>
  <img src="//placehold.it/50?text=DP" alt="">
</div>

<div style="display: inline-block; vertical-align: middle; line-height: 1;">
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>

• • 预览**
• • 顶部对齐：**

• • 中间对齐：**

vertical-align决定垂直对齐方式。如果希望图像和文本在同一行，请使用vertical-align: top。

先说几件事：

• 不使用内联样式
• 不要将float与inline-block混用

选项1：使用flebox

section {
  display: flex;
  gap: 10px;
}

<section>
  <div>
   <img src="//dummyimage.com/55x55" alt="">
  </div>
  <div>
   <span> Look for cases </span>
   <span> from people near you. </span>
  </div>
 </section>

选项#2使用内联块

一个二个一个一个

选项#3使用浮点

div {
  float: left;
  margin-right:10px
}

<div>
  <img src="//dummyimage.com/55x55" alt="">
</div>

<div>
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>

flexbox来救援。
我把你的div添加到另一个里面，这样可以对齐它的元素。在我的CSS中，我的图片是100px，所以我把宽度改为100px。相应地改变你的。

.halign {
  display:flex;
  align-items: center;
}

<div class="halign">
<div style="width: 100px;">
        <img src="http://lorempixel.com/100/100/" alt="">
      </div>

      <div>
        <span> Look for cases </span>
        <span> from people near you. </span>
      </div>
</div>

尝试将CSS和HTML分开，不要将display:inline-block与float:left混用。在两个div后面都使用clear:both

<style>
        .fisrstDiv {
          float: left;
          display:block;
        }
         .secondDiv {
          float: left;
          display:block;
        }
      .clear {
          clear: both; 
        }
    </style>

超文本标记语言

<div class="fisrstDiv">
  <img src="//placehold.it/50?text=DP" alt="">
</div>

<div class="secondDiv">
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>
<div class="clear"></div>