Burger Menu Placement in Flexbox-CodePudding

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

CodePudding user response：

.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;
}

CodePudding user response：

I recommend you do the following:

<div >
  <div >
    <h2>Daily Meeting Minutes</h2>
    <div >
      <p>Sections: 5</p>
      <p>Questions: 5</p>
      <p>Tables: 5</p>
    </div>
  </div>              
<div >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.

CodePudding user response：

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 >
        <main >
            <div >
                <div >
                  <div >
                    <div >
                      <h2>Daily Meeting Minutes</h2>
                    <div >
                        <p>Sections: 5</p>
                        <p>Questions: 5</p>
                        <p>Tables: 5</p>
                      </div>
                    </div>
                  <div >
                    <p>:</p>
                  </div>
                    </div>
                </div>
            </div>
        </main>
      </div>