javascript - Align inputs in different td horizontally

Question

I am trying to align 2 inputs in 2 different td tag to align horizontally. Moreover, when input has been appended into td, it will cover the td text

There are 2 cases:

• When both of td have text or empty, then everything is OK.
• When one of the 2 td has text, they do not align on same line

This is my source code I have tried: https://jsfiddle.net/oc8Lgm3y/2/

question from:https://stackoverflow.com/questions/65913952/align-inputs-in-different-td-horizontally

Answer 1

you can add vertical-align:bottom; to the td,th.

You can check the source code here: https://jsfiddle.net/k1gapfmq/

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  vertical-align: bottom;
  padding: 8px;
}

input[name=^='product'] {
  background-color: red;
}