How can I make responsive vertical menu that shrinks when screen's width is less than 800px?

I want to make responsive vertical menu with icons, that would shrink with transition (fade in to left) when screen width is to small. It would look like this - normal menu:

(icon1) Position1
(icon2) Position2
(icon3) Position3

and after shrinking window to let's say 800px it should fade into the left and look like this:

(icon1)
(icon2)
(icon3)

How do I make such thing using only HTML and CSS?

Solution

To make the element fade out when the page width gets smaller than 800px, for screensizes bigger than 800px, you need to give the list items a position of relative, set the list items left property to 0 and opacity to 1 so that they'll be displayed normally, and for screensizes smaller than 800px, change the left value to 100% and opacity to 0 so that it'll not be displayed anymore. next set its transition property for all screen sizes to 'all 1s ease-in-out' so the sliding will be smooth.

for the icon and the item to be displayed on the same line, just set the display of the li containing the item and the icon to flex and their align-items property to center so they'll be horizontally aligned.

@media only screen and (max-width: 800px) {
  .hide-800 {
    left: 100%;
    opacity: 0;
  }
}

@media only screen and (min-width: 800px) {
  .hide-800 {
    left: 5px;
    opacity: 1;
  }
}

.item {
  position: relative;
  transition: all 1s ease-in-out;
}

.row {
  display: flex;
  position: relative;
  align-items: center;
}

.list {
  overflow: hidden;
}

<body>
  <ul class='list'>
    <li class="row">
      <span class="icon">icon1</span>
      <div class="item hide-800">item1</div>
    </li>
    <li class="row">
      <span class="icon">icon2</span>
      <div class="item hide-800">item2</div>
    </li>
    <li class="row">
      <span class="icon">icon3</span>
      <div class="item hide-800">item3</div>
    </li>
  </ul>
</body>