Problem
I have an html table with a particular who's content can vary in size, sometimes the text is large and sometimes it's small, this leads to each table row varying in height which is fine.
However the next to the one whos content varies in size contains two buttons, and they stay at the top of the cell.
What I'm hoping to achieve
I would like the two buttons to center in their cell in the middle to match the middle of the whos content size varies.
I'm using bootstrap 4, I know you can use align-center but that doesn't seem to be doing the trick. Normally I would post code but it would actually be simpler to show a picture to explain what I mean.
Now as you can see those two buttons I want to go to the center of their cells to match the ingredients column.
What I have tried
I have tried various methods using bootstraps align-middle for the the buttons are in but they just stay at the top of the cell.
This may of been asked before, but each question I find on stack I'm struggling to find one that matches my specific scenario so if its been posted before please by all means link me and close the question.
EDIT
Showing the code would not make sense and would look out of context, unless I Posted the code for both the model, view, controller, and js file which seems like it might be over kill considering the question can be answered based on the context alone.