Need help with aligning pictures and text so that they are in a row


HELP!!! How do I align the two texts and pictures so that they will be in the same row? - HTML & CSS
Repl link:

code snippet
``` The whole code? idk

the link for the code itself:

  1. Using Flexbox:
  • First, create a container <div> element to hold the texts and pictures.
  • Apply display: flex; to the container element to enable flexbox.
  • By default, flexbox places all the items in a row. If there are more items than can fit in a row, they will wrap to the next row.
  • To align the items vertically, use align-items: center; or align-items: baseline;.
  • To align the items horizontally, use justify-content: space-between; or any other desired value.

Here’s an example code:

<div class="container">
  <p>Some text</p>
  <img src="example.jpg" alt="Example">


.container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  1. Using CSS Grid:
  • Create a container <div> element to hold the texts and pictures.
  • Apply display: grid; to the container element to enable CSS Grid.
  • Set the grid-template-columns property to specify the width of each column.
  • Place each text or picture element inside the container and they will be automatically placed in the specified grid positions.


<div class="container">
  <p class="text">Some text</p>
  <img src="example.jpg" alt="Example">


.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* adjust the number of columns as needed */

There are many other ways to do this. These are just a few examples

1 Like

You can just do flex-direction: row; though.


What do you mean exactly? Apply display: flex; and flex-direction: row; to the parent container.

You can also just use display: inline-block

1 Like

I use Flex for the elements I need to be lined up. It is very very easy to use!


I’ve used display:inline-block so many times. It usually works, but I’ve been starting to use flexbox as I’ve started to understand it a little more.

Thanks so much for all the input!! I can now get them on the same row, but there is an unwanted space between the two boxes.
Does anyone know how to fix this.
Again, thank you all so much!

I’m looking on Everything Crochet and they don’t seem to be aligned anymore…

You can easily fix this by:

.container > * {
  margin-left: 0;
  margin-right: 0;

What this does is apply the no-margin styles to all the children of the container. Note that this does not apply to nested elements. You can see more about it here.