horizontally align elements in a table cell on a single line

Question

In my table I have a column that contains two buttons and an input element. It is ordered; minus button, input, plus button. However these elements are all aligned vertically. I cannot seem to find a solution to my particular situations. How do I get it to align horizontally.

html:

<td class="text-center">
  <button class="page-btn" type="submit" value="foil-{{ card.card_id }}" onclick="minus_inventory(this.value)" tabindex="-1">
    <img class="icon" src="{% static 'base/img/icons/minus.png' %}" alt="Filter Sets">
  </button>
  <input type="number" id="foil-{{ card.card_id }}" class="page-input-inventory" maxlength="3" autocomplete="off" value="{{ card.foil }}" tabindex="2">
  <button class="page-btn" type="submit" value="foil-{{ card.card_id }}" onclick="plus_inventory(this.value)" tabindex="-1">
    <img class="icon" src="{% static 'base/img/icons/plus.png' %}" alt="Filter Sets">
  </button>
</td>

css:

.page-btn {
  width: 1.5rem;
  margin: 0 .4rem;
  padding: 0;
  outline: none !important;
}
.page-btn .icon {
  filter: invert(99%) sepia(10%) saturate(424%) hue-rotate(204deg) brightness(114%) contrast(93%);
  width: 1.5rem;
  height: 1.5rem;
  margin: .125rem 0 .125rem 0;
  outline: none !important;
}
.table {
  color: #f6f6f6;
  font-size: .8rem;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  color: #f6f6f6;
  background-color: #161d31;
}
.page-input-inventory {
  vertical-align: middle;
  text-align: center;
  font-size: .9rem;
  width: 3rem;
  height: 1.5rem;
  margin: .1rem auto;
  padding: 0 8px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  outline: 0 none !important;
}

screenshot:

Answer 1

Have you tried this?

xyz {
   display: inline;
}