Text with icon top right - html

Question

I have two divs one contain text and another contain button,
Here is what I wnat to have:
1.
.stalin::after {
content: '';
background-image: url('https://thumb.ibb.co/e3WZQU/Ellipse_2.png');
position: absolute;
}
.trump:after{
content: '';
background-image: url('https://thumb.ibb.co/d4BOKp/Ellipse_3.png');
position: absolute;
}
.marketing-primary{
color:black;
font-family: Roboto Regular;
width: 373px;
height: 92px;
background-color:white ;
}
<div class="stalin">
<p>Germany is dying slowly</p>
</div>
<div class="trump">
<button type="button" class="marketing-primary">Dowiedz się wiecej</button>
</div>
I tried different aproach nothing is working? any idea how to achieve what I want?

Answer 1

The first thing you'll want to do is give each of your :after pseudo-elements a width and height that reflects the circles' width and height. This is 38px and 48px respectively.
Instead of position: absolute, you'll actually want position: relative, and to make use of float to position the :after next to their respective elements. You'll also want float: left on the main two elements themselves (.stalin and .trump). As you're floating the elements, you'll need to also add clear: left to .trump to drop it back to the next line.
Also, note that you'll actually want to set your rules for .stalin's pseudo-element on .stalin p:after, rather than .stalin:after.
From here it's just a matter of making use of margin to control the offsets of :after, and adding a negative z-index on .trump:after to position it behind the respective element.
This can be seen in the following:
.stalin {
float: left;
}
.stalin p::after {
content: '';
background-image: url('https://thumb.ibb.co/e3WZQU/Ellipse_2.png');
width: 38px;
height: 38px;
position: relative;
float: right;
margin-top: -20px;
margin-left: 20px;
}
.trump {
float: left;
clear: left;
}
.trump:after {
content: '';
background-image: url('https://thumb.ibb.co/d4BOKp/Ellipse_3.png');
width: 48px;
height: 48px;
position: relative;
float: right;
margin-left: -24px;
margin-top: 60px;
z-index: -1;
}
.marketing-primary {
color: black;
font-family: Roboto Regular;
width: 373px;
height: 92px;
background-color: white;
}
<div class="stalin">
<p>Germany is dying slowly</p>
</div>
<div class="trump">
<button type="button" class="marketing-primary">Dowiedz się wiecej</button>
</div>

Answer 2

.marketing-primary{
width:300px;
height:100px;
background:#fff;
border:none;
color:#000;
outline:none;
box-shadow:0 0 5px rgba(0,0,0,.3);
font-family: Roboto Regular;
}
.marketing-primary:after{
content:'';
width:20px;
height:20px;
border-radius:50%;
border:1px solid green;
position:absolute;
right:-10px;
bottom:-50px;
z-index:-1;
}
.stalin p{
font-family: Roboto Regular;
position:relative;
display:table;
}
.stalin p:after{
content:'';
position:absolute;
width:15px;
height:15px;
border-radius:50%;
border:1px solid blue;
top:-5px;
right:-20px;
}
<div class="stalin">
<p>Germany is dying slowly</p>
</div>
<span style="position:relative;">
<button class="marketing-primary">Dowiedz się wiecej</button>
</span>