Flex while filling the first space with nothing

Question

I am using an external component that is using flexbox.
I only have 2 texts and want to display as follows.

So I want to flex it as if there are 3 items.

But it instead shows up as follows.

This is the component and the CSS in that external component. (I can't change this ExternalComponent and its styling)

ExternalComponent

<div className={container}>
    {children}
</div>

styling

.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  border-radius: 10px 10px 0 0;
  max-height: 75%;
  right: 0;
  bottom: 0;
  left: 0;
}

I am using the component this way.

<ExternalComponent>
    <div>test1</div>
    <div>test2</div>
</ExternalComponent>

I can achieve what I want by doing the following:

<ExternalComponent>
    <div/>
    <div>test1</div>
    <div>test2</div>
</ExternalComponent>

But is there a better to do this instead of adding a div even though I don't need it.