CSS and HTML for this below view - html

Question

I am left with 2 labels and can't find solution.
I have done this much HTML and CSS
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>

Answer 1

I would put the images inside a position:absolute div like this
#incoming_call{
border: 2px solid black;
}
#call{
color:green;
}
#images{
position:absolute;
top:0px;
}
<div id="incoming_call" class="bottom_toolbar_incoming_call" style="bottom:90px; position: fixed; right: 3px; z-index: 9999; height:45px; width:250px; background-color:lightgray;">
<div id="call">call from 7040</div>
<div id="time">0:01</div>
<div id="images">
<img src="http://findicons.com/files/icons/766/base_software/128/circle_red.png" alt="Reject" style=" width:40px; height:40px; display: inline-block; padding:2px; left:200px; position: relative;" id="Reject" />
<img src="http://findicons.com/files/icons/766/base_software/128/circle_green.png" alt="Answer" style=" width:40px; height:40px; display: inline-block; padding:2px; left:100px; position: relative;" id="answer" />
</div>
</div>

Answer 2

Try this way:
Takes care of vertical alignment (as it appears in your design)
Content height adjusts according to adjacent column
No browser issues as well
Red and Green color using CSS - Hence no images required
.parent-container {
width: 320px;
}
.box {
border: 2px solid #000;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.box__cell {
display: table-cell;
width: 50%;
vertical-align: middle;
padding: 0 15px;
}
ul {
padding: 0;
list-style-type: none;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #000;
}
.b-red {
background: red;
}
.b-green {
background: green;
}
.t-green {
color: green;
}
.text-right {
text-align: right;
}
.list-item li {
display: block;
}
.list-inline li {
display: inline-block;
}
<div class="parent-container">
<div class="box">
<div class="box__cell box__cell--left">
<div id="incoming_call">
<ul class="list-item">
<li class="t-green">Incoming Call</li>
<li><b>00: 05</b></li>
</ul>
</div>
</div>
<div class="box__cell box__cell--left">
<ul class="list-inline text-right">
<li class="circle b-red">
</li>
<li class="circle b-green">
</li>
</ul>
</div>
</div>
</div>