Alternative for float [duplicate] - html

Question

This question already has answers here:
flexbox space-between and align right
(3 answers)
Closed 2 years ago.
I am trying to avoid float, and have some trouble moving the image to the right.
Trying my best to use flexbox but nothing is working. The thing is used here is a flex direction row. I can't come up with any idea's to do it.
Could someone please help me with this?
Thank you so much.
Here is an example of the code in codepen.io
https://codepen.io/wingho/pen/oNYXoLR
.why-us-column {
margin-left: 10px;
width: 90%;
flex: 1 0 65%;
position: relative;
display: flex;
flex-direction: row;
}
.car-home {
width: 30%;
margin-top: 30px;
display: flex;
flex: 1 0 55%;
position: relative;
}
.text-column {
position: relative;
}
.text-home {
margin-left: 30px;
margin-top: 50px;
line-height: 1.4;
}
.text-afq {
color: dodgerblue;
font-weight: bold;
}
.why-title {
font-weight: bold;
}
.contact-button {
color: white;
font-weight: bold;
background-color: dodgerblue;
border: 1px solid dodgerblue;
padding: 7px 9px 7px 9px;
border-radius: 5px;
}
.title-graph-first {
color: dodgerblue;
margin-top: 10px;
display: block;
font-weight: bold;
font-size: 18px;
}
.offer-title-second {
margin-top: -3px;
color: rgb(74, 75, 75) !important;
font-weight: bold;
font-size: 30px;
}
.bg2 {
background-color: #f1f1f1;
}
<div class="bg-1">
<div class="why-us-container">
<div class="why-us-column">
<img src="img/car-home.jpg" alt="test auto" class="car-home">
<div class="text-home">
<h5 class="title-graph-first"> Lorem ipsum </h5>
<h3 class="offer-title-second"> Lorem ipsum </h3>
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
<p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum.
</p>
<div class="button-container">
<button class="contact-button"> Lorem ipsum </button>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can use position:absolute and text-align:right as an alternative of float.
div{background:red; text-align:right; position:relative}
#ab1{ position:absolute; left:0; background:yellow;}
#ab2{background:yellow; }
#ab3{background:yellow; }
<div><span id="ab1" style="display: inline-block;">A</span>
<span id="ab2" style="display: inline-block;">B</span>
<span id="ab3" style="display: inline-block;">C</span>
</div>