The final layout you have have provided is EXACTLY what I'm after, however I couldn't get this layout to work in mobile view.
The only way I could get all 3 settings boxes visible in mobile view was to place them in one column, so they appear stacked (which looks great on mobile, but a little bit odd on desktop).
When they are in a row – like the layout you have provided – they get pushed out of view on mobile view. This may be because I am using DIVI, I'm not too sure why it wouldn't break down properly.
If there is any way I can style the block like your final layout (and it work in mobile view) I will be absolutely thrilled.
I am not having any luck applying the css. I have tried pasting it individually in:
AJAX search pro > theme options > custom CSS
DIVI module > Advanced > custom CSS
DIVI page settings > custom CSS
Thank you so much for your advice!