To achieve this layout, you have a few options:
- Set both elements to
display: inline-block;
- Utilize the
grid property in the parent class.
- Make the parent class a flex container with
display: flex; and flex-direction: row;
Here is an example using (inline-block):
aside,
main {
display: inline-block;
vertical-align: middle;
border: 1px solid blue;
}
aside {
height: 100vh;
width: 350px;
justify-content: space-between;
flex-direction: column;
}
aside ul {
padding-top: 30%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: inline-block;
font-size: 23px;
color: $color5;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
<div>
<aside>
<ul>
<li><a href="#PersonalInformation">Personal Information</a></li>
<li class="second"><a href="#SecurityandLogin">Security and Login</a></li>
<li><a href="Logout">Logout</a></li>
</ul>
</aside>
<main>
<h4>To keep you safe and secure</h4>
</main>
</div>
And here's an example utilizing (flex):
div {
display: flex;
flex-direction: row;
align-items: center;
}
main, aside {
border: 1px solid blue;
}
aside {
height: 100vh;
width: 350px;
justify-content: space-between;
flex-direction: column;
}
aside ul {
padding-top: 30%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: inline-block;
font-size: 23px;
color: $color5;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
<div>
<aside>
<ul>
<li><a href="#PersonalInformation">Personal Information</a></li>
<li class="second"><a href="#SecurityandLogin">Security and Login</a></li>
<li><a href="Logout">Logout</a></li>
</ul>
</aside>
<main>
<h4>To keep you safe and secure</h4>
</main>
</div>
Lastly, here's an example using (grid):
div {
display: grid;
grid-template-columns: 350px 1fr;
gap: 1rem;
}
aside,
main {
border: 1px solid blue;
}
aside {
height: 100vh;
width: 350px;
justify-content: space-between;
flex-direction: column;
}
aside ul {
padding-top: 30%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: inline-block;
font-size: 23px;
color: $color5;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
<div>
<aside>
<ul>
<li><a href="#PersonalInformation">Personal Information</a></li>
<li class="second"><a href="#SecurityandLogin">Security and Login</a></li>
<li><a href="Logout">Logout</a></li>
</ul>
</aside>
<main>
<h4>To keep you safe and secure</h4>
</main>
</div>