How to create a 3 column layout where the middle column wraps

I'm trying to create a "3 column" layout like this

Where the variable length string wraps or drops below the badge if the viewport becomes too small. In this scenario I would like the chevron button to stay pinned to the upper left location.

I've tried multiple scenarios with flex containers, grid layouts, but can't get it quite right. In some scenarios I've gotten both the string and chevron to drop down or just the chevron, but neither is the desired result.

If anyone can help me understand how to create the desired layout with the intended behavior I would appreciate it.

UPDATE

I was provided this code by a bootstrap community member which solves the requirements using the native bootstrap classes and no CSS modifications required

<div class="d-flex gap-3">
  <div class="flex-grow-1">
    <!-- Put variable length badge and variable length string in here -->
  </div>
  <div class="flex-shrink-1">
    <!-- Put chevron icon here -->
  </div>
</div>

Here's a solution using flexbox inside a grid as I suggested.
It isn't perfect as I'm not great at CSS, but seems to match the behavior you want.

A few key notes:

1. To keep the icon in its own section on the far right, use the grid-template-columns property to set the icon region to auto, and the other section(s) to take all the remaining space

.grid-container {
    display: grid;
    grid-template-columns: 1fr auto;
}

2. To get the badge and variable string sections to be left aligned, but also wrap when needed, we set the flex container to have the property justify-content: flex-start; while also setting the container items to have left and right margins of 0px (or at the very least, not set to auto);

.flex-container > div{
    min-height: 1rem;
    margin: 5px 0px;
}

3. To force the chevron/icon to the top of its area, we set the height to 100% with no padding

.icon {
    height: 100%; 
    padding: 0px; 
}

I added a bottom-border for each row to separate them visually, but I know my solution isn't perfect because you if you reduce the vertical padding of the content, the border for the content area and the icon area will stop lining up. If anyone with more CSS experience wants to edit/correct this - feel free.

Codepen

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

<!-- language: lang-css -->

* {
  /*outline: 1px red solid;*/
  box-sizing: border-box;
  margin: auto;
  font-size: 20px;
  color: black;
  padding: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 0px;
  min-width: 400px;
  max-width: 80dvw;
  background-color: lightgray;
}

.grid-container>div {
  border-bottom: black 2px solid;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 0px;
  width: 100%;
  justify-content: flex-start;
}


/* The left and right margins needs to be set to get the spacing we want */

.flex-container>div {
  min-height: 1rem;
  margin: 5px 0px;
}

div.badge {
  background-color: #233299;
  color: lightgrey;
  border-radius: 15px;
  font-weight: bold;
  width: auto;
}

div.content {
  background-color: whitesmoke;
  font-style: italic;
  width: auto;
}


/* This forces the icon div to fill the row height set by flexbox */

.icon {
  height: 100%;
  padding: 0px;
}

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

<main>
  <div class="grid-container">
    <div class="flex-container">
      <div class="badge">Variable Length Badge</div>
      <div class="content">Variable length string</div>
    </div>
    <div class="icon"><svg height="48px" width="48px" version="1.1" id="chevron" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.50 414.50">
        <polygon style="fill:#2488FF;" points="386.258,89.796 207.248,268.223 28.238,89.796 0,118.126 207.248,324.7 414.496,118.126 ">
        </polygon> 
</svg></div>
    <div class="flex-container">
      <div class="badge">Variable Length Badge Two</div>
      <div class="content">Variable length string Two</div>
    </div>
    <div class="icon"><svg height="48px" width="48px" version="1.1" id="chevron" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.50 414.50">
        <polygon style="fill:#2488FF;" points="386.258,89.796 207.248,268.223 28.238,89.796 0,118.126 207.248,324.7 414.496,118.126 ">
        </polygon> 
</svg></div>
    <div class="flex-container">
      <div class="badge">Very long badge name forcing the string into a tiny bit of space before the chevron.</div>
      <div class="content">Variable length string Three</div>
    </div>
    <div class="icon"><svg height="48px" width="48px" version="1.1" id="chevron" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.50 414.50">
        <polygon style="fill:#2488FF;" points="386.258,89.796 207.248,268.223 28.238,89.796 0,118.126 207.248,324.7 414.496,118.126 ">
        </polygon> 
</svg></div>
    <div class="flex-container">
      <div class="badge">Short Badge</div>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="icon"><svg height="48px" width="48px" version="1.1" id="chevron" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.50 414.50">
        <polygon style="fill:#2488FF;" points="386.258,89.796 207.248,268.223 28.238,89.796 0,118.126 207.248,324.7 414.496,118.126 ">
        </polygon> 
</svg></div>
  </div>

</main>

<!-- end snippet -->