Если кругляши жестко заданных размеров, то пожалуйста, балуйтесь абсолютом.
.block {
width: 400px;
height: 200px;
margin-top: 50px;
margin-left: 100px;
position: relative;
border: 1px solid green;
}
.circle, circle2 {
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid red
}
.circle {
left: -25px;
top: -47px;
}
.circle2 {
right: -25px;
top: 50%;
transform: translateY(-50%);
}
<div class='block'>
<div class='circle'>
</div>
<div class='circle2'>
</div>
</div>
обернете еще это все в блок и
на адаптиве уменьшие круги , да зададите паддинги по бокам
полосы делаются идущими друг за другом div, у которых по бокам тоже padding: 0 60px к примеру и пишется определенные border (border-top/border-left и тд)
текст можно обернуть одной div и родителю у которого заданы border Нужные
написать dislplay: flex; align-items:center ( равнять по вертикали) и justify-content: flex-end к краю правому чтоб
