How to move Gmail labels to a 2nd line using CSS only

Question

I use Gmail labels a lot. Automatically sorting emails following some rules I have created. However, I cannot see the subject line with all the labels in the way.

I wanted a way to move the labels to a 2nd line, and figured it out. So from this: To this:

Answer 1

This is just an implementation for Gmail of the code from this post on Gmail specifically.

1. Install a CSS injector

2. Copy and paste the following CSS to that CSS Injector, make sure it is set to !Important

   Apply to: https://mail.google.com/*

  .xT {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  div.yi {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  div.y6 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }