How do I move my more button from being aligned in the middle of the div, to being aligned to the top of the div (where the x mark is)?
Here is my jsfiddle: https://jsfiddle.net/z6syuLfv/.
My code is as follows:
.course-sidebar-audio-item-container {
display: flex;
align-items: center;
width: 100%;
}
.course-sidebar-audio-item-icon-container {
align-items: center;
align-self: flex-start;
display: flex;
flex-shrink: 0;
height: 56px;
justify-content: center;
width: 56px;
background-color: rgba(80, 102, 144, 0.1);
color: #506690;
border-radius: 5px;
}
.course-sidebar-audio-item-icon-container:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: background-color 0.15s ease-in-out;
cursor: pointer;
}
.course-sidebar-audio-item-icon {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
vertical-align: text-bottom;
box-sizing: border-box;
}
.course-sidebar-audio-item-details {
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.6;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
overflow: hidden;
padding-left: 12px;
}
.course-sidebar-audio-item-title {
line-height: 1.6;
font-size: 16px;
}
.course-sidebar-audio-item-duration {
color: #506690;
font-size: 14px;
}
.course-sidebar-audio-item-toolbar-menu-container {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6;
}
.course-sidebar-audio-item-toolbar-menu {
font-size: 1.4rem;
font-weight: 400;
cursor: pointer;
display: inline-flex;
line-height: 16px;
top: 4px;
}
.course-sidebar-audio-item-toolbar-menu-button {
font-size: 1rem;
display: inline-block;
color: #506690;
height: 16px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
outline: none;
border-radius: 8px;
cursor: pointer;
border: 0;
margin: 0;
background-color: rgba(80, 102, 144, 0.1);
}
.course-sidebar-audio-item-toolbar-menu-button:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: opacity 0.15s ease-in-out;
}
.course-sidebar-audio-item-toolbar-menu-icon > svg {
cursor: pointer;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin-top: -1px;
vertical-align: top;
}
.sidebar-step-toolbar-container {
transition: opacity 150ms ease-in-out 0s;
opacity: 1;
position: absolute;
will-change: transform;
z-index: 10;
width: 150px;
margin-top: 85px;
right: 24px;
}
.sidebar-step-toolbar-container-border {
padding: 0;
border-radius: 4px;
margin: 8px 0;
background-color: #fff;
box-shadow: 0 0 0 1px rgba(14, 19, 24, 0.07), 0 2px 12px rgba(14, 19, 24, 0.2);
}
.sidebar-step-toolbar-button-container {
padding: 16px;
max-height: 80vh;
overflow-y: auto;
z-index: 10;
}
.sidebar-step-toolbar-button-row {
display: grid;
}
.sidebar-step-toolbar-button {
border-radius: 4px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0 0.5rem;
margin: 0.25rem 0;
flex: 1 0 50%;
width: 7.5rem;
outline: none;
text-decoration: none;
height: 40px;
transition: background-color 0.1s linear;
font-weight: 400;
line-height: 1.6;
font-size: 0.9rem;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
.sidebar-step-toolbar-button-content {
align-items: center;
display: flex;
height: 100%;
line-height: 1.6;
min-width: 0;
cursor: pointer;
}
.sidebar-step-toolbar-button:hover {
background-color: #edf0f2 !important;
}<div class="course-sidebar-audio-item">
<div class="course-sidebar-audio-item-container">
<div class="course-sidebar-audio-item-icon-container">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.248 5.35c-.138 0-.75.336-.75.75v8.91a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45V6.85l9.997-2v7.16a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45l-.018-10.4c0-.414-.318-.85-.732-.85L8.248 5.35zm-.75 12.4a1.75 1.75 0 1 1-3.499 0 1.75 1.75 0 0 1 3.5 0zm11.497-3a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z" fill="#506690"></path>
</svg>
</div>
<div class="course-sidebar-audio-item-details">
<div class="course-sidebar-audio-item-title">testing_startup_ideas.mp3</div>
<div class="course-sidebar-audio-item-duration">6:20</div>
</div>
<div class="course-sidebar-audio-item-toolbar-menu-container">
<span class="course-sidebar-audio-item-toolbar-menu">
<button class="course-sidebar-audio-item-toolbar-menu-button">
<span class="course-sidebar-audio-item-toolbar-menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path
fill="#506690"
d="M3.25 9.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"
fill-rule="evenodd"
></path>
</svg>
</span>
</button>
</span>
</div>
</div>
</div>
