CSS : Icon and text side by side and having space between two text

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="widgets_div">
    <div class="a"><i class="fa fa-calendar"></i></div>
    <div class="a">Upcoming Events</div>
</div>

CSS

.widgets_div {
  width: 100px;  
}


.a {
  /* display: inline-block; */
}