React Bootstrap --- Align items to the same row in one cell

Question

I am new to react, and I am trying to align the DropDownButton (Position) and the TextInput (Hour) (Refer to here) to the same row in one cell without creating a new column. Is there a way to do it without changing the table's structure? Thanks!

This is my code.

                      <td>
                        <DropdownButton           
                          id="dropdown-basic-button" 
                          title={item.position}
                          type='button'
                        >
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>Position</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>PM</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>SA</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>AP</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>P</div></Dropdown.Item>
                        </DropdownButton>
                        <input
                          type="number"
                          name="workingHour"
                          value={item.workingHour}
                          onChange={(e) => this.handleChangeTM(e.target.value, item, e.target.name)}
                          className="form-control"
                          placeholder='Hour'
                          min='1'
                        />
                      </td>

Answer 1

Add a tag <div className='input-group> to wrap all your content.

  <td>

    **<div className='input-group'>**

    <DropdownButton           
      id="dropdown-basic-button" 
      title={item.position}
      type='button'
    >
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>Position</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>PM</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>SA</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>AP</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent, item, 'position')}>P</div></Dropdown.Item>
    </DropdownButton>
    <input
      type="number"
      name="workingHour"
      value={item.workingHour}
      onChange={(e) => this.handleChangeTM(e.target.value, item, e.target.name)}
      className="form-control"
      placeholder='Hour'
      min='1'
    />

    **</div>**

  </td>