container.css

<div style="position:fixed;top:5%;right:5%;padding:5px;background-color:tomato;display:flex;justify-content:space-between;overflow:hidden;">
  <div class="button-icon-container">
    <img src="images/me.png">
  </div>
  
  <div class="button-text-container">
    <span>Here comes some text.</span>
  </div>
</div>


.button-container {
  position: fixed;
  top: 5%;
  right: 5%;
  padding: 5px;
  background-color: tomato;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}


.button-text-container {
  order:-1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
  white-space:nowrap; /*Keep text always one line*/
  overflow:hidden;
  width:0;
  transition: width 1s;
}

.button-icon-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-icon-container:hover + .button-text-container {
  width:200px;
}