A small trick? that I found.
If you use that style in the code below, components wrapped inside Div align horizontally. (it works with html.H1 or other HTML elements maybe)
You can remove the gap. You can also change flex-end to center to ceter align or check other properties available.
I am a total CSS noub so this will come handy to those who are not familiar with CSS…
Also this is useful when you are running out of columns somehow or cannot bother to add columns in a row with dash bootstrap component.
html.Div(children=[html.I(className="fas fa-gas-pump fa-3x"),
html.P("130 Metric Ton Emission", className="")],
style={"display":"flex", "gap":"20px", "align-items":"flex-end"}),
Result:
