Flexbox adding columns + rows within the same flexbox

So I am trying to create a layout that has a sidebar, and then to the right of that there are four more elements, but how do I have one item flex-direction: row and the others columns, is there a way to mix these or is that bad practice?

<header>
  <div class="logo">
    <img src="//cdn.shopify.com/s/files/1/1813/5651/t/28/assets/logo.png?37614">
  </div>
  <div class="nav">
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
  </div>
  <div class="settings">
    <img src="https://via.placeholder.com/50.png/">
    <img src="https://via.placeholder.com/50.png/">
  </div>
</header>

<div class="content">
  <div class="sideBar">
    <h1>Sidebar</h1>
  </div>
  <div class="patientCard">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, saepe animi quisquam maxime, voluptatibus optio natus debitis ipsum delectus eveniet fugiat? Quas sed magnam consectetur accusantium sequi! Sequi, nobis ut!</p>
  </div>
</div>
<div class="videoCard">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia odit, quam doloremque dolor praesentium fuga dignissimos. Vero quod necessitatibus ex consequatur laudantium, nemo, voluptate hic, optio autem incidunt sit quisquam.</p>
  </div>


body, h1 {
  padding: 0px;
  margin: 0px;
}
header {
  display: flex;
  background: linear-gradient(0deg, #3387FE, #3387FE);
  box-shadow: 0px 3px 30px rgba(107, 146, 173, 0.2);
  align-items: center;
  height: 100px;
  padding: 0px 20px;
  .logo {
    flex: 1;
    img {
      width: 50px;
    }
  }
  .nav {
    a {
      font-size: 24px;
      color: #fff;
      margin: 0px 5px;
      text-decoration: none;
      border-bottom: 3px solid #fff;
    }
  }
  .settings {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    img {
      border-radius: 50%;
      height: 50%;
      margin-left: 10px;
    }
  }
}

.sideBar {
  height: 100vh;
  background-color: #313131;
  width: 30%;
  h1 {
    color: #fff;
    padding: 10px;
  }
}

.content {
  display: flex;
  .patientCard {
    background-color: #ddd;
    border: 1px solid #fff;
    margin: 30px;
    padding: 10px;
    height: 20%;
    border-radius: 3px;
  }
  .videoCard {

  }
}

Here is the link to the pen: https://codepen.io/jacksonrose/pen/MWWQRqo

This is what I am trying to achieve