How to vertically align divs and add a right triangle?

Question

I'm trying to create a UI element:

And here's what I have so far.

HTML

<div class="indicator-container">
  <div class="indicator-left-arc"></div>
  <div class="indicator-number-container">
    <div class="indicator-number">1</div>
  </div>
  <div class="indicator-text">Section Description</div>
  <div class="indicator-point"></div>
</div>

SCSS

$indicator-height: 40px;
$light-blue: #90CEF8;
$circle-size: 30px;

div {
    display: inline-block;
    height: $indicator-height;
    line-height: $indicator-height;
    font-size: 0;
    text-align: center;
}

.indicator-container:before {
    vertical-align: middle;
}

.indicator-left-arc, .indicator-number-container, .indicator-text, .indicator-point {
    background: $light-blue;
}

.indicator-left-arc {
    width: $indicator-height / 2;
    border-bottom-left-radius: $indicator-height;
    border-top-left-radius: $indicator-height;
}

.indicator-number {
    background-color: white;
    border-radius: 50%;
    color: #717171;
    height: $circle-size;
    width: $circle-size;
    line-height: $circle-size;
    text-align: center;
    font-size: $circle-size * .9;
    margin-right: 10px;
}

.indicator-text {
    font-size: 14px;
    font-weight: normal;
    word-wrap: normal;
}

.indicator-point {
    width: 0; 
    height: 0; 
    border-bottom: 10px solid transparent;  /* left arrow slant */
    border-top: 10px solid transparent; /* right arrow slant */
    border-left: 10px solid $light-blue; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

CodePen

Objectives:

1. Achieve vertically aligned divs
2. Shorten text div and allow to break between words
3. Successfully implement right triangle
4. Shove numeric circle left into left arc div as shown in picture

Answer 1

.indicator-container {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #90CEF8;
  height: 40px;
  width: max-content;
  padding: 0 5px;
  transform: translateX(40px);
}
.indicator-container:before {
  content:'';
  background: #90CEF8; 
  position: absolute;
  bottom: 0;
  left: -20px;
  width: 20px;
  height: 40px;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
}
.indicator-container:after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid #90CEF8;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.indicator-container span {
  display: inline-block;
}
.indicator-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 50%;
    color: #717171;
    height: 30px;
    width: 30px;
    font-size: 27px;
    transform: translateX(-20px);   
}

<div class="indicator-container">
    <div class="indicator-number">1</div>
    <span>Section Description</span>
</div>

Answer 2

What about an easier way with less of code:

:root {
 --d:50px; /*width of the triangle*/
}
.box {
  display:inline-flex;
  align-items:center;
  color:#fff;
  width:calc(120px + var(--d));
  height:60px;
  padding:10px var(--d) 10px 10px;
  border-radius:50px 0 0 50px;
  background:
   linear-gradient(to top right,#90CEF8 49%,transparent 50%) top right/var(--d) 50%,
   linear-gradient(to bottom right,#90CEF8 49%,transparent 50%) bottom right/var(--d) 50%,
   linear-gradient(#90CEF8,#90CEF8) left/calc(100% - var(--d)) 100%;
  background-repeat:no-repeat;
}
.box:before {
  content:attr(data-number);
  text-align:center;
  font-size:30px;
  width:45px;
  flex-shrink:0;
  padding:5px 0;
  color:#717171;
  background:#fff;
  border-radius:50%;
  margin-right:5px;
}
* {
  box-sizing:border-box;
}

<div class="box" data-number="6">
Some text here
</div>

<div class="box" data-number="7" style="--d:30px">
Another text here
</div>