estoy teniendo un problema con flexbox. Tengo un DIV con class 'wrapper' y dentro hay otros 2 DIVs. Lo que estoy intentando en que cada uno de los DIVs se vea de un lado de la pantalla. Como dividiendo la pantalla en 2. Adjunto el HTML
<div class="loading">
<app-loading-spinner *ngIf="!owners"></app-loading-spinner>
</div>
<div class="wrapper">
<div class="owners-container" *ngFor="let owner of owners">
<p class="owner">
<strong> Full name:</strong> {{ owner.first_name }} {{ owner.last_name }}
<strong>| Gender:</strong> {{ owner.gender }} <strong> | Status:</strong>
{{ owner.status }}
</p>
</div>
<div class="owners-details-container">
<h2>Alguna data</h2>
<p>en un dato</p>
<p>en un dato</p>
<p>en un dato</p>
<p>en un dato</p>
</div>
</div>
Y el CSS es:
.loading {
display: grid;
place-content: center;
}
.owner {
border: 2px solid black;
padding: 1em;
width: 50%;
}
.owner:hover {
background-color: lightgray;
cursor: pointer;
}
.wrapper {
margin: 4em;
display: flex;
flex-direction: column;
border: 2px solid red;
}
.owners-details-container {
border: 2px solid black;
padding: 2em;
width: 40%;
}
Desde ya muchas gracias