SCSS from my predictive search YouTube tutorial video.

predictive-search.scss

.top-bar__search {
  position: relative;
}

.predictive-search {
  background-color: #ffffff;
  border: 1px solid #ababab;
  border-radius: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: calc(100% + 2px);
  transform: translateY(-10px);
  transition-duration: 250ms;
  visibility: hidden;
  width: 350px;
  z-index: 500;

  &.is-showing {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.predictive-search__product {
  align-items: center;
  border-bottom: 1px solid #ababab;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 100%;

  &:last-child {
    border-bottom: 0;
  }

  img {
    width: 20%;
  }

  h2 {
    font-size: 14px;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50%;
  }

  span {
    font-size: 14px;
    width: 20%;
  }
}