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;
}
Site Title
Site Description
Is this possible with Flexbox? What am I doing wrong? Any help would be appreciated.
Thanks in advance.
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;
}
Site Title
Site Description