Three divs inside a div

_Flaviu

I am struggle (I know alost nothing about html) to insert three div's inside a div, something like this: Untitled hosted at ImgBB — ImgBB[^] I have succeeeded to put only the fist div (that one with date), but the next ones (image + texts) I cannot (yet). How can I add the next two (image + mult line texts) ? Here is y trial (didn't work correctly):

		Tuesday
		2023-03-15
	

	

		![](www.test.com/img/etc.png)
	

	

		text text text text text text text text text text text text  
		text text text text text text  
		text text

Can you guide me to solve this task ?

Jeremy Falcon

There are a couple of ways to do this, but let's go with the flexbox method since that's something worth mastering anyway.

section {
background: cyan;
border: 2px dashed blue;
display: flex;
height: 100px;
}
section img {
width: 50px;
height: 50px;
}
section > * {
background: yellow;
border: 2px dashed orange;
padding: 1rem;
}
section > *:last-child {
flex-grow: 1;
}

    Tuesday
    2023-03-15




    ![](//www.test.com/img/etc.png)




  text text text text text text text text text text text text
  text text text text text text
  text text

By default, flexbox will do what you're looking for except for one thing. If you want the last div to take up the remaining space, then you'll need to use the last-child selector to specify that.

Jeremy Falcon

Jeremy Falcon

Also, it's worth nothing that you only need to set display: flex on the outer container, not for every item.

Jeremy Falcon

_Flaviu

Thank you a lot Jeremy. It works for this test, however, I don't think I would go with this solution, because the rest of my html pages are not made it with you approach, and I guess will be difficult to control that pattern several times:

		Tuesday
		2023-03-15
	

	

		![](MyImage.png)
	

	

		text text text text text text text text text  
		text text text text  
		text text text text text text text

You see, the text from the first box should be ceneterd aligned, as long the last box (the right one) should have left - top text centered.

Jeremy Falcon

_Flaviu wrote:

You see, the text from the first box should be ceneterd aligned, as long the last box (the right one) should have left - top text centered.

The right box does have text aligned that way. It's the default. Check it out. As far as the first box, look into the first-child selector. It can be used in much the same way as the last-child one used in the example.

Jeremy Falcon

_Flaviu

Yes, its working now, thank you a lot !!

Jeremy Falcon

You're very welcome.

Jeremy Falcon