Position text inside translated element

I want to achieve such thing:

The text is located inside a half circle, which is on a card. The circle has a minimum width and a maximum ( in order not to full up the full card ). The text can be in 1 or 2 rows maximum.

I cant handle the text positioning, so it would be 10px from the card border. Any ideas?

Here is my current snippet:

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

.list_item {
  height: 85px;
  width: 300px;
  background: white;
  border-radius: 25px;
  border: 1px solid black;
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
}

.circle {
  display: inline-block;
  background: blue;
  min-height: 200px;
  min-width: 200px;
  max-width:300px;
  border-radius:99999px;
  transform: translate(-50%, -50%);
}

.text {
    overflow-wrap: break-word;
    overflow: hidden;
}

<!-- language: lang-html -->

<div class="list_item">
  <div class="circle">
    <div class="text">
        Item 1
      </div>
  </div>
</div>
<div class="list_item">
  <div class="circle">
    <div class="text">
        Item 2222222222222222222222222222222222222222222222222222222222222222222222222
      </div>
  </div>
</div>
<div class="list_item">
  <div class="circle">
    <div class="text">
        Item 3 3333 3333
      </div>
  </div>
</div>

<!-- end snippet -->

As you can see the text is flying somewhere. Is there a way to achieve such things:

Or did i miss something and gone a wrong direction?

You could have the text in a regular rectangular div where the content flows normally, and then append a slight curvature afterwards with a ::after pseudo element that is set to position: absolute and a couple pixels past the furthest distance right

Demo in Stack Snippets

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

.list_item {
  height: 85px;
  width: 300px;
  background: white;
  border-radius: 25px;
  border: 1px solid black;
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
}

.circle {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 0px 3px 0 10px;
    display: inline-flex;
    align-items: center;
    background: #0000ce;
    color: white;
    max-width: 150px;
    z-index: 0;
}

.circle::after {
    content: " ";
    background: #0000ce;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: -1;
    right: -20px;
    margin-top: -44px;
}

<!-- language: lang-html -->

<div class="list_item">
  <div class="circle">
      Item 1
  </div>
</div>

<div class="list_item">
  <div class="circle">
      Item 2 - Longer
  </div>
</div>


<div class="list_item">
  <div class="circle">
      Item 3 - Longer With Line Wrap
  </div>
</div>

<!-- end snippet -->

Explanation

Just to visualize what we're working with, if we start with your CSS structure and take off overflow: hidden and transform: translate(-50%, -50%);, we should get this starting point

If we add translate(-50%, -50%) back in, the circle will shift back and left

Even if if shift the text from the top left to the bottom right of the circle or left aligned to the outer container, I don't see a vehicle for using the text length to determine the circle's position. Because the circle is moved to the left via translate(-50%), it's position is set irrespective of the text length.

Instead, if the text is just placed inside the rectangle with height: 100%, it'll adjust left and right as needed

Then add the circle back in as a child of the text and pin it to the right side with position: absolute