Custom Positioning of H3 and P

Question

My HTML is like this:

<div>
    <h3>Title</h3>
    <p>Content</p>

    <h3>Title</h3>
    <p>Content</p>

    <h3>Title</h3>
    <p>Content</p>
</div>

Problem Nr. 1 I can't change the HTML. I want that p is Boxed(no problem) but than I want that they are in a row. display: flex; was my option. When I use flex h3 and p are next to each other. But I want that h3 is above p .

Desired output example:

h3_________h3_________h3
p__________p__________p

How can I align them?

sorry for my english not my native language

Answer 1

Attempt with flexbox, since you cant change the HTML, setting a 33% width shouldn't be an issue:

 div { flex-flow: row wrap; display: flex; } div > h3, div > p { width: 33.333%; } div > h3 { order: 1; } div > p { order: 2; } 

 <div> <h3>Title1</h3> <p>Content1</p> <h3>Title2</h3> <p>Content2</p> <h3>Title3</h3> <p>Content3</p> </div> 

Answer 2

use this:

 .item { display: inline-block; width: 33%; } 

 <div class="item"> <h3>Title</h3> <p>content</p> </div> <div class="item"> <h3>Title</h3> <p>content</p> </div> <div class="item"> <h3>Title</h3> <p>content</p> </div> 

Answer 3

 .test{ flex-flow: row wrap;display: flex; } .test h3,.test p { width: 33.333%;} .test h3 {order: 1;} .test p {order: 2;} 

 <div class="test"> <h3>Title1</h3> <p>content1</p> <h3>Title2</h3> <p>content2</p> <h3>Title3</h3> <p>content3</p> </div> 

Answer 4

Create new external div and set property.

display: flex;
flex-direction: column;

My example:

 .box { display: flex; flex-direction: column; } 

 <div class="box"> <div class="A">A</div> <div class="B">B</div> <div class="C">C</div> </div>