align one li below another li in a horizontal ul - html

Question

I am trying to achieve the following layout:
What I've now is:
How do I get li.company under the li.name?
I have tried to float the company li to the left and and making it the last li but that doesn't work keeps going to the same line. Any help will be appreciated.
Here is my code:
#flip {
padding: 5px;
background-color: #4d4d4f;
border: solid 1px #c3c3c3;
width: 33vw;
}
.contact-widget-list,
.sender-info {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
.sender-info {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 30%;
}
.clearfix::after {
clear: both;
}
.sender-info li {
display: inline-block;
margin: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
}
.email-icon,
.calander-icon,
.dropdown-icon {
float: right;
}
<div id="flip">
<ul class="sender-info">
<li class="name">Name 123123</li>
<li class="company">Company 123123</li>
<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>
<li class="clearfix"></li>
</ul>
</div>

Answer 1

Just change the order of your HTML a bit. Place icons first in HTML and other items after it.
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>
And add following css:
.sender-info .name,
.sender-info .company {
background: white;
overflow: hidden;
width: 200px;
}
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
#flip {
padding: 5px;
background-color: #4d4d4f;
border: solid 1px #c3c3c3;
}
.contact-widget-list,
.sender-info {
list-style: none;
display: inline;
overflow: hidden;
margin: 0;
padding: 0;
}
.sender-info {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 30%;
}
.sender-info li {
margin: 5px;
padding-bottom: 5px;
}
.sender-info .name,
.sender-info .company {
background: white;
overflow: hidden;
width: 200px;
}
.email-icon,
.calander-icon,
.dropdown-icon {
float: right;
}
<div id="flip">
<ul class="sender-info">
<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>
<li class="name">Name 123123</li>
<li class="company">Company 123123</li>
</ul>
</div>