Solution 1 :

add to the id #dashboard_menu{ display:flex;}

Solution 2 :

Remove padding and just keep the fixed width and height.
If you use padding, the box dimensions will change with the text content.

Problem :

I have a list of buttons as following, and its CSS

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  width: 200px;
  white-space: normal;
  word-wrap: break-word;


.table_mgt, .inventory_mgt {
    border-radius: 30px;

  <div id="dashboard_menu">
    <button class="button table1">Table 1</button>
    <button class="button table2">Table 2</button>
    <button class="button table_mgt">Table Mgt</button>
    <button class="button table3">Table 3</button>
    <button class="button table4">Table 4</button>
    <button class="button table5">Table 5</button>
    <button class="button inventory_mgt">Inventory</button>

The text in the table_mgt button is too long and it pushes that button out of row, compared to the rest. How do I force all buttons to be in the same row, regardless of the length of the text inside ?