Add padding between items-CodePudding

I use this code to display label and drop down:

const exchangeid = {
  display: "inline-block",
};
const exchangeidsearch = {
  display: "inline-block",
  paddingLeft: "10px",
};

.......

<th className="hand">
  <div style={exchangeid} onClick={sort('pair')}>
    Exchange Id <FontAwesomeIcon icon="sort" />
  </div>
  <div style={exchangeidsearch}>
    Filter
     <select>
      <option>5</option>
      <option>5</option>
      <option>5</option>
      <option>5</option>
      <option>5</option>
    </select>
  </div>
</th>

How I can space between text Filter and select drop down?

CodePudding user response：

Do you want to add space between the text 'filter' and the select element? You should probably wrap the filter in span (or a div or anything more relevant). Then you can add simple margin-right to your span:

.exchangeid {
  display: inline-block;
}

.exchangeidsearch {
  display: inline-block;
  padding-left: 10px;
}

.text {
  margin-right: 20px;
}

<th >
  <div  onClick={sort('pair')}>
    Exchange Id <FontAwesomeIcon icon="sort" />
  </div>
  <div >
    <span >Filter</span>
     <select>
      <option>5</option>
      <option>5</option>
      <option>5</option>
      <option>5</option>
      <option>5</option>
    </select>
  </div>
</th>