Flexbox - How to create a border around and between differently sized items

I'm trying to make a Flexbox that looks like this: Flexbox layout, where there's a border around the entire Flexbox, as well as between the two items.

My issue is that I can either get a border around the entire Flexbox, but not between the items, or I can add a border between the items but it doesn't stretch the entire length of the Flexbox.

I've played around with align-content, align-items, justify-content, margins, padding...I just can't figure out how to have 2 items that are centered vertically and horizontally, with a border that stretches the length of the box.

Thanks so much in advance!

.container {
    display: flex;
    height: 300px;
    border: solid red 2px;
    align-items: center;
    
}

.content {
    border: solid grey 2px;
    flex-basis: 50%;
    padding: 30px;
}

<body>
    <div class="container">

        <div class="content">
            <img href="#fillThisInLater" alt="circle" titel="Circle">
        </div>

        <div class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
        </div>
    </div>
</body>

Solution

Since your flex container has a defined height, the border issue will be solved if you add height: 100%; and box-sizing: border-box; to the flex-items.

EDIT: To center the contents inside the flex-items, make them also flex-containers with settings as shown below:

.container {
  display: flex;
  height: 300px;
  border: solid red 2px;
}

.content {
  border: solid grey 2px;
  flex-basis: 50%;
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div class="container">

  <div class="content">
    <img href="#fillThisInLater" alt="circle" titel="Circle">
  </div>

  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
  </div>
</div>

If you only want a "middle line" and no separate outside borders for the flex items, just only apply a border-right to the first flex-item:

.container {
  display: flex;
  height: 300px;
  border: solid red 2px;
}

.content {
  flex-basis: 50%;
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}
.content:first-child {
  border-right: solid grey 2px;
}

<div class="container">

  <div class="content">
    <img href="#fillThisInLater" alt="circle" titel="Circle">
  </div>

  <div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis rerum iste ratione cum sit illo est tenetur fugit sapiente eum enim maiores laborum voluptatem amet, alias vero, ut velit eos!
  </div>
</div>