CSS：图标和文本并排，两个文本之间有空格

Question

我正在制作一个 div，右侧有一个图标和两个跨度。

就像在图像中

 .widgets_div {
  border-bottom: thin #edf1f2 solid;
  padding: 22.85px 0;
}

.widgets_div .icon_div {
  display: inline;
  margin-left: 15px;
}

.widgets_div .icon_div span i {
  font-size: 24px;
}

.widgets_div .text_div {
  display: inline;
  margin-left: 10px;
}

.widgets_div .text_div span {
  color: #58666e;
  font-size: 12px;
}

.widgets_div .text_div span+span {
  color: #747F85;
  font-size: 11px;
}

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="widgets_div">
  <div class="icon_div">
    <span><i class="fa fa-calendar"></i></span>
  </div>
  <div class="text_div">
    <span>Upcoming Events</span><br>
    <span>Description</span>
  </div>
</div>

我试过这段代码，但我无法得到我预期的结果。

原文由 user7030651 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个：

 .widgets_div {
   border-bottom: thin red solid;
   padding: 22.85px 0;
   display: flex;
   align-items: center;
}

原文由 Pine Code 发布，翻译遵循 CC BY-SA 4.0 许可协议