JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.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:...