<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">

<div class="color-list">
  <section class="color" id="clean">
    <h2 class="name">Clean</h2>
    <ul class="details">
      <li>#A7D2CB</li>
      <li>RGB(167,210,203)</li>
    </ul>
  </section>
  <section class="color" id="butter">
    <h2 class="name">Butter</h2>
    <ul class="details">
      <li>#F2D388</li>
      <li>RGB(242,211,136)</li>
    </ul>
  </section>
  <section class="color" id="salmon">
    <h2 class="name">Salmon</h2>
    <ul class="details">
      <li>#C98474</li>
      <li>RGB(201,132,116)</li>
    </ul>
  </section>
  <section class="color" id="eggplant">
    <h2 class="name">Eggplant</h2>
    <ul class="details">
      <li>#874C62</li>
      <li>RGB(135,76,98)</li>
    </ul>
  </section>
  <section class="color" id="eggplant">
    <h2 class="name">Eggplant</h2>
    <ul class="details">
      <li>#874C62</li>
      <li>RGB(135,76,98)</li>
    </ul>
  </section>

$timing: 0.5s;


body {
  font-family: 'Inconsolata', monospace;
}

.color-list {
  display: flex;
  flex-direction: row;
  height: 50vh;
}

.color {
  flex: 0 0 20%; /*flex-grow | flex-shrink | flex-basis*/
  box-shadow: 0 0 30px #424242;
  padding: 1em;
  color: white;
  transition: flex-basis $timing ease-in-out;
  &:hover {
    flex-basis: 40%;
    .details {
      opacity: 1;
    }
  }
}

.name {
  font-size: 1.2em;
}

.details {
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.details li {
  line-height: 2em;
}

#clean {
  background-color: #A7D2CB;
}

#butter {
  background-color: #F2D388;
}

#salmon {
  background-color: #C98474;
}

#eggplant {
  background-color: #874C62;
}

* {
  box-sizing: border-box;
}