unable to position elements using backwards compatible CSS - html

Question

I am trying to position a content inside div.
The idea is to make it cross browser compatible, so I am trying to avoid the use of flex. I would like to find a solution using compatible CSS
and the CSS I am using
.tu-plus-wrapper {
&__helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
&__logo{
vertical-align: middle;
}
&__content {
display: inline-block;
text-align: right;
right: 0;
margin-left: auto;
&__points {
font-family: $RobotoLight;
font-size: 2.4rem;
line-height: 36px;
}
&__text {
font-family: $RobotoRegular;
font-size: 1.2rem;
line-height: 20px;
}
}
}
I want to align the logo vertically and the right side content to the far right of parent div, but there is some kind of style collision. I would appreciate some CSS magic here.
and of course the html structure:
<div class="tu-plus-wrapper">
<span class="tu-plus-wrapper__helper"></span>
<img class="tu-plus-wrapper__logo" src="assets/imgs/tuplus/tuplus.svg">
<div class="tu-plus-wrapper__content">
<div class="tu-plus-wrapper__content__points">{{points}}</div>
<div class="tu-plus-wrapper__content__text">Puntos</div>
</div>
</div>

Answer 1

to push an element to the right, you can use float: right. Then to center vertically, one trick is to position the element with top: -50% and transform: translateY(50%)
.tu-plus-wrapper {
position: relative;
&__helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
&__logo{
position: relative;
top: -50%;
transform: translateY(50%);
}
&__content {
display: inline-block;
text-align: right;
right: 0;
margin-left: auto;
float: right
&__points {
font-family: $RobotoLight;
font-size: 2.4rem;
line-height: 36px;
}
&__text {
font-family: $RobotoRegular;
font-size: 1.2rem;
line-height: 20px;
}
}
}