convert a table into responsive?

Hi,
After couple of days of study and trial, I finished my first WP site. All technical “problems” have been solved, except one:
I copied, from another site, a table which is a calculator, it’s simply, without heading row, each row has one column (text) to 3 columns, some row has 2 columns (without second column “$”).
It’s like this:

  <form name="calculator" id="calculator">
    <table border="0" width="100%" cellspacing="0" cellpadding="2">
      <tbody>
        <tr>
          <td><b>Annual Salary:</b></td>

          <td align="right">$</td>

          <td><input name="Salary" size="10" type="text" value="50000" /></td>
        </tr>
    .....

And there comes a javascript to do the calculation, which I managed to add into page footer with help of Code Snippets plugin. It originally looks like:

function calculate() {
	 cF= document.forms["calculator"];

	 var fStr,fPmt,fTerm,fSalary,fLoan;
	 fSalary= ConvertToFloat(cF.Salary.value);
.....   

So, it’s fetching data with the form’s Input’s “Name”.
It works, but this table is not responsive, cellphone view will cut righthand inputbox out or half out. I’m trying to fix it.
Don’t know if I should convert it to div?
I’m learning a bit of flexbox,
then I find tutorial about @media,
but also I see something about bootstrap col-sm-12 .etc, which I never heard of.
Could anybody please point the best choice for me to learn and fix it?
Considering: I’m in WP(Elementor) environment, and, I don’t want to change code in calcaltor js, that would be terrible, that said, this js still can fetch data by “Name”.
Please, any trick…. give another width value? use a plugin? anything.
Appreciate any response.

• This topic was modified 6 years ago by anderson456.
• This topic was modified 6 years ago by anderson456.
• This topic was modified 6 years ago by anderson456.
• This topic was modified 6 years ago by anderson456.

The page I need help with: [log in to see the link]