Remove white space in table - html

Question

I have a table and in one of the columns exists two icons.
here is the pic
this is the code:
<td>
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
I need the icons to be in the same line and the same height as the other icons.
So I added display: flex.
And get this result:
And since I need the icons to be in the same line as the other I used:
padding-top: 23px and get this results
The problem is when I hover with the mouse on the line, in this place exists the white or blank space.
The white space starts exactly after I used display flex, and reduces a little after I used padding top.
I do not want this white blank, so when I hover all the line will be blue as before (first pic).
can someone assist
this is my new code:
<td style="display: flex;padding-top: 23px;">
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
this is the computed tab
If I do this in the developer tools it solved, how to do it via code?

Answer 1

Take a look, I have created an example and it works, so you should check CSS code.
If you cannot provide CSS code how can I help?
table {
border: 1px solid red;
width: 50%;
}
<table>
<tr>
<td style="display: flex;">
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-plus-circle-o text-success"></i>
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-help zmdi-hc-fw"
data-toggle="tooltip"
data-placement="top"
data-container="body"
data-html="true" title=""
data-original-title="ADD">
</i>
</td>
</tr>
</table>