Side by side div elements with float for audio item

user_436493 0
Viewed 54

I'm trying to recreate the element below:

enter image description here

But for some reason, I am struggling to position the elements correctly using flexbox. I've posted a fiddle here: https://jsfiddle.net/10qpkeg3/.

HTML:

<div class="course-sidebar-audio-item-container">
  <div class="course-sidebar-audio-item-icon-container">
    <div class="course-sidebar-audio-item-icon">
      <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="currentColor"
        ></path>
      </svg>
    </div>
    <div class="course-sidebar-audio-item-details">
      <div class="course-sidebar-audio-item-title">
        <span>testing_startup_ideas.mp3</span>
      </div>
    </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: 4px;
  cursor: pointer;
}

.course-sidebar-audio-item-icon-container:hover {
  background-color: rgba(80, 102, 144, 0.15);
  transition: background-color 0.15s ease-in-out;
}

.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;
  cursor: pointer;
  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;
}
css html
2 Answers
.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: 40%;
  background-color: rgba(80, 102, 144, 0.1);
  color: #506690;
  border-radius: 4px;
  cursor: pointer;
}

.course-sidebar-audio-item-icon-container:hover {
  background-color: rgba(80, 102, 144, 0.15);
  transition: background-color 0.15s ease-in-out;
}

.course-sidebar-audio-item-icon {
  align-items: center;
  justify-content: center;
  width: 20%;
  margin-top:32px;
  margin-left:12px;
  height: 100%;
  position: relative;
  vertical-align: text-bottom;
  box-sizing: border-box;
}

.course-sidebar-audio-item-details {
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;  
  padding-left: 2px;
}

.course-sidebar-audio-item-title {
  word-break:break-word;
  text-align:center;
}
user_118075120

Updated your CSS. You have added height: 100% to this class .course-sidebar-audio-item-icon. That is why you were facing alignment issue. Also, course-sidebar-audio-item-icon-container this class is containing both the icon and text so you can update width accordingly here.

    .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: 100%;
  background-color: rgba(80, 102, 144, 0.1);
  color: #506690;
  border-radius: 4px;
  cursor: pointer;
}

.course-sidebar-audio-item-icon-container:hover {
  background-color: rgba(80, 102, 144, 0.15);
  transition: background-color 0.15s ease-in-out;
}

.course-sidebar-audio-item-icon {
  align-items: center;
  justify-content: center;
  width: 25px;
  margin-right: 12px;
  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;
  cursor: pointer;
  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;
}
user_70647110
Related