JSFiddle - React, Tailwind, and code Playground

by asant93

HTML

<div id="field-filter-TIPO" class="css-1hqm095 container">
  <svg
    aria-hidden="true"
    role="img"
    class="octicon octicon-x-circle-fill css-djuh4e"
    viewBox="0 0 12 12"
    width="12"
    height="12"
    fill="currentColor"
    style="
      display: inline-block;
      user-select: none;
      vertical-align: text-bottom;
      overflow: visible;
    "
  >
    <path
      fill-rule="evenodd"
      d="M1.757 10.243a6 6 0 118.486-8.486 6 6 0 01-8.486 8.486zM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763l-2 2z"
    ></path>
  </svg>
  <div style="font-size: 16px; width: auto" class="css-1bmhiq9">
    <svg viewBox="25 25 50 50" width="1em" height="1em" class="css-1bez47e">
      <circle
        cx="50"
        cy="50"
        r="22"
        fill="none"
        stroke="currentColor"
        stroke-width="6"
        stroke-miterlimit="10"
        class="css-frwtbx"
      ></circle>
    </svg>
  </div>
  <div
    title="ColumnFilter"
    kind="ColumnFilter"
    id="columnfilter--fetching"
    name="Fetching"
    class="css-utvy5"
  >
    <button class="css-m8wrzs">
      <svg
        stroke="currentColor"
        fill="currentColor"
        stroke-width="0"
        viewBox="0 0 24 24"
        font-size="16"
        class="css-1cx02qk"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M21 3H5a1 1 0 0 0-1 1v2.59c0 .523.213 1.037.583 1.407L10 13.414V21a1.001 1.001 0 0 0 1.447.895l4-2c.339-.17.553-.516.553-.895v-5.586l5.417-5.417c.37-.37.583-.884.583-1.407V4a1 1 0 0 0-1-1zm-6.707 9.293A.996.996 0 0 0 14 13v5.382l-2 1V13a.996.996 0 0 0-.293-.707L6 6.59V5h14.001l.002 1.583-5.71 5.71z"
        ></path>
      </svg>
    </button>
  </div>
</div>

CSS

.container {
	display: inline-flex;
  align-items: center;
  justify-content: right;
}

.container div > svg {
  margin-right: -8px;
}