Burger Menu Placement in Flexbox - css

Question

I want to build a little note taking app but i cant figure out how i can put a burger menu on the right side of the flexbox. Down here you can find my js and css file:
JavaScript / HTML
<div className={styles.wrapper}>
<main className={styles.content}>
<div className={styles.templatelist}>
<div className={styles.template}>
<h2>Daily Meeting Minutes</h2>
<div className={styles.properties}>
<p>Sections: 5</p>
<p>Questions: 5</p>
<p>Tables: 5</p>
</div>
</div>
</div>
</main>
</div>
I have tried to create a new div and position it with top and left but nothing seems to work for me.
CSS
.wrapper {
display: flex;
margin-top: 2rem;
}
.content {
display: flex;
flex-direction: column;
margin: auto;
width: 50%;
height: 100%;
}
.templatelist {
margin-top: 2rem;
display: flex;
flex-direction: column;
}
.template {
width: 100%;
height: 6rem;
border-radius: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13.3px);
-webkit-backdrop-filter: blur(13.3px);
border: 1px solid rgba(255,153,0, .5);
}
.properties {
display: flex;
flex-direction: row;
margin-top: 1rem;
gap: 2rem;
}
Codepen
https://codepen.io/Vylex/pen/ZERgxzm
Desired outcome

Answer 1

.template {
width: 100%;
height: 6rem;
border-radius: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13.3px);
-webkit-backdrop-filter: blur(13.3px);
border: 1px solid rgba(255,153,0, .5);
display: flex;
justify-content: space-between;
}
.properties {
display: flex;
flex-direction: column;
}
p {
margin: .5rem;
}

Answer 2

I recommend you do the following:
<div class="templatelist">
<div class="template">
<h2>Daily Meeting Minutes</h2>
<div class="properties">
<p>Sections: 5</p>
<p>Questions: 5</p>
<p>Tables: 5</p>
</div>
</div>
<div class="menu">Burger</div>
keep the border and everything in the templateList class. Use the display to flex, flex-direction to row, and justify-content to space-between. I believe this will work for you.

Answer 3

CSS and HTML
.wrapper {
display: flex;
margin-top: 2rem;
}
.content {
display: flex;
flex-direction: column;
margin: auto;
width: 50%;
height: 100%;
}
.templatelist {
margin-top: 2rem;
display: flex;
flex-direction: column;
}
.template {
width: 100%;
border-radius: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13.3px);
-webkit-backdrop-filter: blur(13.3px);
border: 1px solid rgba(255,153,0, .5);
}
.properties {
display: flex;
flex-direction: row;
gap: 2rem;
justify-content: space-between;
align-items: center;
}
.burger{
font-size: 2em;
}
.options{
display: flex;
column-gap: 1em;
}
<div class="wrapper">
<main class="content">
<div class="templatelist">
<div class="template">
<div class="properties">
<div class="left">
<h2>Daily Meeting Minutes</h2>
<div class="options">
<p>Sections: 5</p>
<p>Questions: 5</p>
<p>Tables: 5</p>
</div>
</div>
<div class="burger">
<p>:</p>
</div>
</div>
</div>
</div>
</main>
</div>