JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circletop">
  <div class="numberpr">3° anno</div>
  <div class="lordo">Valore lordo stimato</div>
  <!--I add div icon here-->

  <div class="valori"> <?=$min3_anno ." - " . $max3_anno?><div class="icon"><img src="https://icon2.kisspng.com/20180206/urw/kisspng-check-mark-x-mark-clip-art-green-checkbox-cliparts-5a795064947fc2.2477878115178998766083.jpg" width="30" /></div></div>
</div>

CSS

.circletop {
  /* circle styles */
  position:relative;
  width: 300px;
  height: 300px;
      font-family: Raleway;
  border: 1px solid #222;
  border-radius: 50%;
  margin: 0 auto;
      box-shadow: 0 0 20px #ccc;
  
  /* become a flex container */
  /* its children will be flex items */
  display: flex;
  /* place items in column */
  flex-direction: column;
  /* center flex items horizontally */
  align-items: center;
  /* center all content vertically */
  justify-content: center;
}

/* simulate one more item to "balance" dex text */
.circletop:before {
  content: "\A0";
  visibility: hidden;
}

.lordo {
    color: #45cec8;
           padding-top: 10px;
    padding-bottom: 25px;
    font-weight: bold;
        font-size: 19px;
}

.valori {
    border-radius: 50px;
    background: #05c6bf;
    padding: 14px;
    width: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 9px #45cec8;
        font-size: 25px;
    font-weight: bold;
    position:relative;
}
.icon{position:absolute;right:0;top:-15px}