css circle with icon inside it

Question

I am trying achieve as shown in image below

I have managed to create css circles with icon inside it but text after it is not in line with cirlce.

.circle {
  background: #938005;
  border-radius: 50%;
  color: black;
  display: inline-block;
  height: 50px;
  font-weight: bold;
  font-size: 1.2em;
  width: 50px;
  margin: 0 auto;
}

.circle span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  width: 50px;
  text-align: center;
  padding: 0 15px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="box box-info">
  <div class="box-body">
    <div class="col-md-3"><span class="circle"><span><i class="fa fa-comments-o"></i></span></span> <b>Chat</b> Send Public and Private Messages</div>
  </div>
</div>

Answer 1

You should wrap text inside div and use display inline-block as

.chart{
    display: inline-block;
    vertical-align: top;
    padding: 5px;
}

.circle {
  background: #938005;
  border-radius: 50%;
  color: black;
  display: inline-block;
  height: 50px;
  font-weight: bold;
  font-size: 1.2em;
  width: 50px;
  margin: 0 auto;
}

.circle span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  width: 50px;
  text-align: center;
  padding: 0 15px;
}

.chart{
    display: inline-block;
    vertical-align: top;
    padding: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="box box-info">
  <div class="box-body">
    <div class="col-md-3"><span class="circle"><span><i class="fa fa-comments-o"></i></span></span>
    <div class="chart">
    <b>Chat</b> <div>Send Public and Private Messages</div>
    </div>
    </div>
  </div>
</div>