CSS Flex noob here

Question

I cant find a way to put everything on the same line. But my title ( aka "azdazd" ) must be flex-start, or something similar. And my edit-delete must be flex-end, or something similar.

Idk why there is this purple dash, something seems wrong.

My problem

CSS FILE

.sheet {
  width: 100%;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 16px -8px rgba(0, 0, 0, 0.68);
  box-shadow: 0px 0px 16px -8px rgba(0, 0, 0, 0.68);
  margin: 30px 0;
}

.sheetWrapper {
  padding: 10px;
}

.headSheetWrapper {
  display: flex;
  width: 100%;
}

.sheetTitle {
  display: flex;
  justify-content: flex-start;
}

.edit-delete {
  display: flex;
  justify-content: flex-end;
}

Quoting the interesting part from my HTML

<div className="sheet">
   <div className="sheetWrapper">


       <div className="headSheetWrapper">
         <div className="sheetTitle">
           <h2>{sheet.title}</h2>
         </div>
         {!isEmpty(user[0]) && user[0].name === sheet.author && (
         <div className="edit-delete">
           <button onClick={() => setEditToggle(!editToggle)}>edit</button>
           <button onClick={() => dispatch(deleteSheet(sheet.id))}>delete</button>
         </div>
         )}
       </div>


   </div>
</div>

Answer 1

.headSheetWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}