css flag object (https://github.com/inuitcss/inuitcss/blob/master/objects/_objects.flag.scss)

_flag.scss

$inuit-global-spacing-unit: 8px;

.o-flag {
  display: table; 
  width: 100%;
  border-spacing: 0;
}

.o-flag__img,
.o-flag__body {
  display: table-cell;
  vertical-align: middle;
}

.o-flag__img {
  width: 1px;
  padding-right: $inuit-global-spacing-unit;

  /**
   * 1. Fixes problem with images disappearing.
   *
   *    The direct child selector '>' needs to remain in order for nested flag
   *    objects to not inherit their parent’s formatting. In case the image tag
   *    is wrapped into another tag, e.g. an anchor for linking reasons, it will
   *    disappear. In that case try wrapping the whole o-flag__img object into
   *    an anchor tag.
   *
   *    E.g.:
   *
   *      <a href="/">
   *        <div class="o-flag__img">
   *          <img src="./link/to/image.jpg" alt="image alt text">
   *        </div>
   *      </a>
   */

  > img {
    max-width: none; /* [1] */
  }
}

.o-flag__body {
  width: auto;
}


/* Reversed flag
   ========================================================================== */

/**
 * 1. Swap the rendered direction of the object…
 * 2. …and reset it.
 * 3. Reassign margins to the correct sides.
 */

.o-flag--reverse {
  direction: rtl; /* [1] */

  > .o-flag__img,
  > .o-flag__body {
    direction: ltr; /* [2] */
  }

  > .o-flag__img {
    padding-right: 0; /* [3] */
    padding-left: $inuit-global-spacing-unit; /* [3] */
  }

}


/* Alignment variants
   ========================================================================== */

/**
 * Vertically align the image- and body-content differently. Defaults to middle.
 */

.o-flag--top {

  > .o-flag__img,
  > .o-flag__body {
    vertical-align: top;
  }

}


.o-flag--bottom {

  > .o-flag__img,
  > .o-flag__body {
    vertical-align: bottom;
  }

}