CODEWITHSUNDEEP
cssreactjs
user1285928
user1285928

Reputation: 1476

Add padding between items

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?

Upvotes: 0

Views: 95

Answers (1)

Mush-A
Mush-A

Reputation: 447

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 class="hand">
  <div class="exchangeid" onClick={sort('pair')}>
    Exchange Id <FontAwesomeIcon icon="sort" />
  </div>
  <div class="exchangeidsearch">
    <span class="text">Filter</span>
     <select>
      <option>5</option>
      <option>5</option>
      <option>5</option>
      <option>5</option>
      <option>5</option>
    </select>
  </div>
</th>

Upvotes: 2

Related Questions