I can't position the img next to the p - css

Question

<section class="authentic">
<div class="right-col">
<h2>Authentic. Awesome</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus iste neque asperiores dolores eligendi tempore quia, cupiditate exercitationem fugiat eius.</p>
<img src="images/food.jpg" alt="bowl">
</div>
</section>
section.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
}
The page shows that the columns are divided into two but the image isn't placed on the second column but instead, below the paragraph.
I tried putting a
float: right;
under .authentic img but it didn't do anything.
I also tried altering the rows in hopes of only getting one row of block but nothing happened.

Answer 1

The authentic section only has one child so the grid-template-columns: repeat(2, 50%) not working here. It will need two child to divide them into two columns.
You need to move the image outside of right-col so that it works as different columns.
section.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
}
<section class="authentic">
<div class="right-col">
<h2>Authentic. Awesome</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus iste neque asperiores dolores eligendi tempore quia, cupiditate exercitationem fugiat eius.</p>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_0hG64Numx1G5C_2yl63NChKDzfO-o6Fo3g&usqp=CAU" alt="bowl">
</section>