First two divs on the left (one under the other) and the the last one on the right using Flexbox

Question

I'm trying to place three divs using Flexbox.

I need to put the .site-title and .site-description divs on the left one under the other, and the .menu-toggle button on the right like below.

I tried with some variations of the following CSS code with no success.

.container {
  display: flex;
  justify-content: space-between;
}

.site-title {
  flex: 0 0 auto;
  align-self: flex-start;
}

.site-description {
  flex: 0 0 auto;
  align-self: flex-start;
}

.menu-toggle {
  flex: 0 0 auto;
  align-self: flex-end;
}

<div class="container">
  <h1 class="site-title">
    <a href="https://demo.com/" rel="home">Site Title</a>
  </h1>
  <p class="site-description">Site Description</p>
  <button class="menu-toggle" aria-expanded="false">Menu</button>
</div>

Is this possible with Flexbox? What am I doing wrong? Any help would be appreciated.

Thanks in advance.

Answer 1

The simplest thing to do to use Flexbox would be to add the title and description in a container element. While not required, I did the same with the menu button.

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div class="col-left">
    <h1 class="site-title">
      <a href="https://demo.com/" rel="home">Site Title</a>
    </h1>
    <p class="site-description">Site Description</p>
  </div>
  <div class="col-right">
    <button class="menu-toggle" aria-expanded="false">Menu</button>
  </div>
</div>

Depending on how the rest of the content of the site is arranged, I could see floats and/or various positioning (absolute, fixed) approaches being more appropriate.