CSS items of 50% width, but when at least 1 of the items content extends the width, have all items change to 100% width

Question

I have a container and items that are in the container. I want these to appear in two columns( which i am achieving with the items having min-width of about 50%) but if the content inside the item extends beyond the min-width i want all items to become 100% width.

This is what i want to achieve:

2 columns (items 50% width):

1 column (items 100% width):

Here is a playground example of my code - https://jsfiddle.net/meL8jdu6/37/ in my own project

.container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid black;
  padding: 14px;
  min-width: 45%;
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
  flex-grow: 1;
}

.radio {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
}

<div class="container">
  <label class="item">
    <input class="radio"type="radio" />
    <span>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
  </label>
  <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
</div>

Currently I am using flex and flex grow to get something similar, but with my code if the item is an odd nth number then it expands to 100% width, and if the content inside of an item is larger than the width not all items grow to full width. It may be better to use grid, but i could not get anything close compared to using flex.

Answer 1

.container {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid black;
  padding: 14px;
  flex: 1 1 45%;
  max-width: 100%;
  /* min-width: 45%; */
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
  /*flex-grow: 1;*/
}

.radio {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
}

<div class="container">
  <label class="item">
    <input class="radio"type="radio" />
    <span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  </label>
  <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
</div>

.container {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid black;
  padding: 14px;
  flex: 1 1 45%;
  max-width: 100%;
  /* min-width: 45%; */
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
  /*flex-grow: 1;*/
}

.item span {
  width: fit-content;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.radio {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
}

<div class="container">
  <label class="item">
    <input class="radio"type="radio" />
 <span>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</span>
  </label>
  <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
    <label class="item">
    <input class="radio" type="radio"/>
    <span>text</span>
  </label>
</div>