Clearable Select Dropdown (React + Semantic UI)

<!DOCTYPE html>
<html>

  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.81.1/semantic-ui-react.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

const Form = semanticUIReact.Form;

const options = [
  { value: "A", text: "A" },
  { value: "B", text: "B" },
  { value: "C", text: "C" }
];

const ClearableSelect = ({ options, label }) => {
  return (
    <div className="select1">
      <Form.Select options={options} multiple label={label} />
      <div className="clear">&times;</div>
    </div>
  );
};

const ClearableSelect2 = ({ options, label }) => {
  return (
    <div className="select2">
      <Form.Select options={options} label={label} />
      <div className="clear">&times;</div>
    </div>
  );
};

ReactDOM.render(
  <div className="ui container"><Form><ClearableSelect options={options} label="Options 1"/><ClearableSelect2 options={options} label="Options 2"/></Form></div>,
  document.getElementById('example')
);

/* Styles go here */

.select1 {
  display: flex;
  align-items: center;
}

.select1 > .field {
  flex: 1;
}

.select1 > .clear {
  font-size: 1.5em;
  flex: 0 0 35px;
  text-align: center;
}

.select2 {
  position: relative;
}

.select2 .clear {
  position: absolute;
  top: 50%;
  right: 30px;
  font-size: 1.5em;
}