Html 在水平方向上，将一个li与另一个li对齐

我正在尝试实现以下布局：

我现在知道的是：

如何在

li.name

下获取

li.company

我试着把公司的li放到左边，让它成为最后一个li，但这不起作用，一直走到同一条线上。任何帮助都将不胜感激

这是我的代码：

#翻转{
填充物：5px；
背景色：#4dF；
边框：实心1px#c3c3；
宽度：33vw；
}
.联系人列表，
.发件人信息{
列表样式：无；
显示：内联；
保证金：0；
填充：0；
}
.发件人信息{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
宽度：30%；
}
.clearfix:：之后{
明确：两者皆有；
}
.发件人信息李{
显示：内联块；
保证金：5px；
垫底：5px；
边缘底部：5px；
}
.电子邮件图标，
.calander图标，
.下拉图标{
浮动：对；
}

名称123123
公司123123

只需稍微更改

HTML

的顺序即可。在

HTML

中首先放置图标，然后放置其他项目

HTML:

<div id="flip">
  <ul class="sender-info">

    <!-- Following icons should come first in HTML -->
    <li class="dropdown-icon"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
    </li>
    <li class="calander-icon"><i class="fa fa-calendar" aria-hidden="true"></i>
    </li>
    <li class="email-icon"><i class="fa fa-envelope" aria-hidden="true"></i>
    </li>

    <!-- Place following code after icons in HTML -->
    <li class="name">Name 123123</li>
    <li class="company">Company 123123</li>
  </ul>
</div>

@导入url（“https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
#翻转{
填充物：5px；
背景色：#4dF；
边框：实心1px#c3c3；
}
.联系人列表，
.发件人信息{
列表样式：无；
显示：内联；
溢出：隐藏；
保证金：0；
填充：0；
}
.发件人信息{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
宽度：30%；
}
.发件人信息李{
保证金：5px；
垫底：5px；
}
.sender info.name，
.发件人信息.公司{
背景：白色；
溢出：隐藏；
宽度：200px；
}
.电子邮件图标，
.calander图标，
.下拉图标{
浮动：对；
}

名称123123
公司123123

.sender-info .name,
.sender-info .company {
  background: white;
  overflow: hidden;
  width: 200px;
}