Centered text or icon in React

Question

Trying to place an icon at the center of two boxes. Appreciate your help on this. Thanks.

Answer 1

App.tsx

export default function App() {
  return (
    <Row>
      <Col>
        <div className="input-group">
          <Input
            type="text"
            className="custom-input origin"
            placeholder="Origin"
          />
          <img
            src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
            alt="star"
            width="15"
            className="star"
          />
          <Input
            type="text"
            className="custom-input destination"
            placeholder="Destination"
          />
        </div>
      </Col>
    </Row>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.input-group {
  position: relative;
}

.input-group .custom-input {
  height: 3rem;
  letter-spacing: 1.5px;
  font-size: 12px;
  border-radius: 0px !important;
  padding-left: 10px;
}

.input-group .destination {
  position: absolute;
  left: 170px;
}

.star {
  z-index: 999;
  position: relative;
  left: -8px;
}

.autocomplete {
  padding: 0px;
  background-size: 17px 15px;
  position: absolute;
}