How to display element on the right between elements using css - css

Question

I have element 1, element 2, element 3 on may page, how can i place element3 on right top below element1 in right top?
It should looks like on the screen below:
I read a lot of examples but it didn't work for me,
i have tried to use
position: absolute;
float: right;
with position: absolutel it places this element on the top of the page but i don't want it,
the maximum i achievedit's right bottom position
Also i tried to use:
margin-top: -150px;
it didn't help neither, while minimizing windows it becomes a mess:
Please help me to solve this issue ?
Edited:
1999,19,1600+,8 is .hero-fact-title,
Founded in Helsinki, Offices, Digital Natives, Design Studios is .hero-fact-description, .fact-summary is that text i want to move also it element3.
.fact-wrapper {
margin-top: 10px;
display: grid;
grid-template-columns: 300px 1fr;
grid-gap: 3px;
//display: inline-block;
&__hero-fact-title {
width: 90px;
height: 42px;
font-family: MaisonNeue;
font-size: 32px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: -1px;
color: #333333;
}
&__hero-fact-description {
width: 193px;
height: 22px;
font-family: MaisonNeue;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
color: #333333;
}
}
.fact-summary {
width: 596px;
height: 96px;
font-family: MaisonNeue;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #333333;
float: right;
}
to display this mess on page i use the code below:
<div className="fact-wrapper">
{facts.map(obj => {
return (
<div>
<div className="fact-wrapper__hero-fact-title">{obj.title}</div>
<div className="fact-wrapper__hero-fact-descriptio">
{obj.description}
</div>
</div>
)
})}
</div>
<h2 className="fact-summary">{factSummary}</h2>

Answer 1

Use flexbox
.container {
display: flex;
flex-direction: column;
justify-content: center;
width: 80%;
margin: 0 auto;
}
.bottom {
display: flex;
align-items: flex-start;
}
.box {
display: flex;
flex: 1;
margin: 5px;
}
.box-one {
border: 2px solid tomato;
padding: 2rem 5px;
}
.box-two {
border: 2px solid teal;
padding: 2rem 5px;
}
.box-three {
border: 2px solid goldenrod;
padding: 1rem 5px;
}
<div class="container">
<div class="top">
<div class="box box-one">box one</div>
</div>
<div class="bottom">
<div class="box box-two">box two</div>
<div class="box box-three">box three</div>
</div>
</div>

Answer 2

I'd propose you to use flex.
Basically you have here two lines.
The first line is a simple div. The second line is a combination of two divs side by side.
There are multiple options to place them side by side you, but it's usually better for future changes to use flex.
To make it work you need to
1. Add "display: flex" to the parent div.
2. Add "flex-grow: 1" style to children. That's it.
Flex-grow defines the ability for a flex item to grow if necessary.
<div>
<div class='block'>Element 1</div>
<div class='parent'>
<div class='block child'>Elemet 2</div>
<div class='block child'>Elemet 3</div>
</div>
</div>
.parent {
display: flex;
}
.child {
flex-grow: 1;
}
.block {
padding: 10px;
border: 1px solid #ccc
}
Example: https://codepen.io/tony-freed/full/vYOrYVE
You can learn more about it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

You could use Flexbox, giving flex-basis: 100% to the first element, e.g.
main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}
div {
box-sizing: border-box;
border: 5px solid currentColor;
flex-basis: calc(50% - 5px);
margin-bottom: 10px;
}
.e1 { color: red; flex-basis: 100%; }
.e2 { color: blue; }
.e3 { color: green; }
<main>
<div class="e1">element 1</div>
<div class="e2">element 2 <br /><br />Lot of text</div>
<div class="e3">element 3</div>
</main>