How do I position the icon to the right of the heading? - html

Question

I would like the layout to look as so, but also be responsive (so that the heading + paragraph both stay positioned to the left of the icon).
CSS:
.feature {
position: relative;
border: 1px solid #000;
}
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: #64beeb;
border-radius: 50%;
float: right;
}
.icon {
font-size: 1.75rem;
color: #fff;
}
HTML:
<div class="feature">
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
</div>
CODEPEN DEMO

Answer 1

add this to .circle and remove float:right; Then it will be absolutely positioned from the parent relative container.
position: absolute;
top: 10px;
right: 10px;
.feature {
position: relative;
border: 1px solid #000;
}
.circle {
position: absolute;
top: 10px;
right: 10px;
height: 2.5rem;
width: 2.5rem;
background-color: #64beeb;
border-radius: 50%;
}
.icon {
font-size: 1.75rem;
color: #fff;
}
<div class="feature">
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
</div>
And you could add padding-right: 50px; to .feature so the icon (blueih circle) will not be over text. See here https://jsfiddle.net/ymzofeph/

Answer 2

One option is to use flexbox. You can add display: flex to the container (.feature). Add flex: 1 to the text. To create some space around the icon you can use a margin value you find suitable.
.feature {
position: relative;
border: 1px solid #000;
/* for demo */
text-align: right;
display: flex;
}
.text {
flex: 1;
}
.circle {
height: 2.5rem;
width: 2.5rem;
background-color: #64beeb;
border-radius: 50%;
margin: 1rem;
}
.icon {
font-size: 1.75rem;
color: #fff;
}
<div class="feature">
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
</div>

Answer 3

<div class="feature">
<div class="circle text-center">
<i class="icon ion-android-bulb"></i>
</div>
<div class="text text-right">
<p class="h2">Diversity of Content</p>
<p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
</div>
</div>
<style>
.circle{
float:right;
width:40px;
height:40px;
margin:0 0 0 20px;
}
.text{
overflow:hidden;
}
</style>

Answer 4

Put the float:right div before the .text-right div. Then add padding-right:2.5rem; to the .text-right div.
Example