How to move the text on the right spot? - html

Question

I would like to put my text on the right side of the darker box. I want the AAAAAAAAAAAAAA' above the dark box to be on the right side. I tried it by writing it in an another container but it pushes the dark box down. Thank you!
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.gray-container {
background: #E5E5E5;
width: 60%;
margin: 0 auto;
min-height: 600px;
margin-top: 20px;
border-left: 10px
}
.dark-container {
background: #B9B9B9;
width: 20%;
margin: 0 auto;
min-height: 660px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-left: 30px;
}
.text {
text-align: justify margin: 20px 20px 30px 100px;
}
img {
width: 300px;
height: 90px;
padding: 30px 30px 30px 50px;
}
.gray-banner {
float: left;
width: 60%;
min-height: 20px;
padding: 10px 0 0 10px;
background-color: #E5E5E5;
position: relative;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0 120px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #fff;
}
li {
float: left;
border-right: 1px solid #bbb;
border-color: #87CEFA;
width: 200px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF51;
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 0 14px 15px 15px;
}
h1 {
margin: 5px 5px 15px 44px;
font-family: calibri;
}
h2 {
margin: 50px 27px 0 45px;
font-family: calibri;
}
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px
}
<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<div class="gray-banner">
<h1>eeeeeeee</h1>
</div>
<div class="gray-container">
<div class="text">
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="dark-container">
<h2 style="font-size: 24px; margin: 10px 5px 5px 0; "><br>hey</h2>
</div>

Answer 1

You can use flex on the parent to put them in a row, then use order: -1 on the darker box to put it visually on the left of the text.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.gray-container {
background: #E5E5E5;
width: 60%;
margin: 0 auto;
min-height: 600px;
margin-top: 20px;
border-left: 10px;
display: flex;
}
.dark-container {
background: #B9B9B9;
width: 20%;
margin: 0 auto;
min-height: 660px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-left: 30px;
order: -1;
}
.text {
text-align: justify margin: 20px 20px 30px 100px;
}
img {
width: 300px;
height: 90px;
padding: 30px 30px 30px 50px;
}
.gray-banner {
float: left;
width: 60%;
min-height: 20px;
padding: 10px 0 0 10px;
background-color: #E5E5E5;
position: relative;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0 120px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #fff;
}
li {
float: left;
border-right: 1px solid #bbb;
border-color: #87CEFA;
width: 200px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF51;
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 0 14px 15px 15px;
}
h1 {
margin: 5px 5px 15px 44px;
font-family: calibri;
}
h2 {
margin: 50px 27px 0 45px;
font-family: calibri;
}
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px
}
<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<div class="gray-banner">
<h1>eeeeeeee</h1>
</div>
<div class="gray-container">
<div class="text">
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="dark-container">
<h2 style="font-size: 24px; margin: 10px 5px 5px 0; "><br>hey</h2>
</div>

Answer 2

You should put float:right in your p element
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px;
/*add this*/
float:right;
}