How to remove the title to make the block responsive?

Question

css

Hello.
I am not very experienced in layout, and I ran into such a problem: I need to make this block adaptive.
https://codepen.io/iremlopsum/pen/OVMxzp?editors=1100
The most logical thing in my opinion is to remove the texts in the title of the tabs. For example, on mobile there were only icons on the left.
How can this be implemented?

Answer 1

Wrap the headers in an additional block and hide it if the screen width is, for example, 600.

<li class="choose active">
   <div class="icon active">
      <svg viewBox="0 0 32 32">
        <g filter="">
           <use xlink:href="#shopping-cart"></use>
         </g>
       </svg>
      </div>
     <span class="block"> Choose </span>
    </li>

@media screen and  (max-width: 600px) {
  .block{
   display:none;
  }
}