How can I fix my custom CSS text alignment issue?

[1F]

Dear community,

I created a custom css to align on the right the BOLD text only. 

I have an issue, it works but the text is not on the same line than the text on the left. There is a line break...

By the way, all those custom css code slow down my website... what can i do ?

Can you please help me? Below is my custom css:

h3,
h4 {
text-align: left;
}
h4 {
border-bottom: 0.5px solid #999;
padding-bottom: 7px;
font-size: 14px;
}
h3 {
font-size: 22px;
}
h4 strong,
h4 b {
text-align: right !important;
display: block;
}

Thank you guys !

[ThePixelEdge]

Hello @1F 
Kindly provid the url so that we can debug at our level.

[1F · Accepted solution]

Many thanks dear,

I've just fix it this morning and forgot to mark it as accepted solution.

Here is the code:

.animate-arrow {
font-size: 15px;
padding: 10px 45px;
background-color: #000000;
border-radius: 30px;
color: #ffffff;
}
h3,
h4 {
text-align: left;
}
h4 {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.5px solid #999;
padding-bottom: 7px;
font-size: 14px;
}
h3 {
font-size: 22px;
}
.multicolumn-card__image-wrapper .media:hover {
transform: scale(1);
}

Thank you!