html - How do I make the div inline with td in table?

Question

I've got a table and I've put a div inside it but now it's not in line with the td. I've put display inline block on both the td and div but the td only moved up a little bit. But it needs to be inline with the box. How can I fix this?? Here is my HTML code for the table :

#box4 {
  height: 200px;
  width: 300px;
  background-color: #f2f2f2;
}

th,
td {
  padding: 15px;
}

<table style="margin-left:5%;margin-bottom: 10%;">
  <tr>
    <td>
      <h3>Name:</h3>
    </td>
    <td>Here will be the name of the course.</td>
  </tr>
  <tr>
    <td>
      <h3>Description:</h3>
    </td>
    <td>Here will be the description of the course.</td>
  </tr>
  <tr>
    <td>
      <h3>Chapters:</h3>
    </td>
    <td>
      <select name="cars" id="cars">
        <option value="volvo">Chapter 1</option>
        <option value="saab">Chapter 2</option>
        <option value="mercedes">Chapter 3</option>
        <option value="audi">Chapter 4</option>
      </select>
    </td>
  </tr>
  <tr>
    <td style="display: inline-block; position: relative;top:-20%">
      <h3>Video:</h3>
    </td>
    <td>
      <div style="display: inline-block;" id="box4"></div>
    </td>
  </tr>
  <tr>
    <td>
      <h3>Quiz:</h3>
    </td>
    <td><button>Do quiz</button></td>
  </tr>
  <tr>
    <td>
      <h3>Course trial:</h3>
    </td>
    <td><button>Start trial</button></td>
  </tr>
  <tr>
    <td></td>
    <td><button>Community</button></td>
  </tr>
</table>

question from:https://stackoverflow.com/questions/66061321/how-do-i-make-the-div-inline-with-td-in-table

Answer 1

your H3 elements naturally have padding and are pushing them down.

add

h3 {
    padding: 0;
}