How can I stack two items on the same row within the same box-CodePudding

I hope my title makes sense. Basically, I want to stack an H1 on top of an H3 that I have within the same flex box. This is for an assessment for App Academy. I'm not asking for a solution. Just a bit of guidance on how to do this concept.

Here is the image of reference:

The "Title goes here" and "Secondary text" is what I am referring to. I know my code is obviously not the cleanest, but I plan on cleaning up/optimizing a bit once I figure this darn thing out.

Here is my HTML:

.card {
 display: flex;
 width: 344px;
 flex-wrap: wrap;

}

.card:hover {
 box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}

.desert {
 height: 194px;
 width: 100%;
}

.avatar {
 border-radius: 50%;
 height: 40px;
 width: 40px;
 align-items: center;
 padding: 10px;
}

p {
 padding: 16px;
 font-size: 11px;
}

h1 {
 color: #000;
 font-size: 22px;
}


h3,
p {
 color: #232f32;
}

<div >
 <img  src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="a desert">
 <img  src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="an avatar">
 <h1>Title goes here</h1>
 <h3>Secondary text</h3>
 <p>Greyhound divisively hello coldly wonderfully marginally far
        upon excluding.</p>
</div>

CodePudding user response：

You could simply wrap both headers in a block element (divs are display: block; by default):

.card {
  display: flex;
  width: 344px;
  flex-wrap: wrap;
}

.card:hover {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}

.desert {
  height: 194px;
  width: 100%;
}

.avatar {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  align-items: center;
  padding: 10px;
}

p {
  padding: 16px;
  font-size: 11px;
}

h1 {
  color: #000;
  font-size: 22px;
}

h3,
p {
  color: #232f32;
}

h1,
h3 {
  /* headers have a large margin by default */
  margin: 0;
}

/* if you need the wrapper to be a flexbox
.wrapper {
  display: flex;
  flex-direction: column;
}
*/

<div >
  <img  src="./images/desert.jpg" alt="a desert">
  <img  src="./images/person-avatar.jpg" alt="an avatar">
  <div >
    <h1>Title goes here</h1>
    <h3>Secondary text</h3>
  </div>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>

If you need the wrapper to be a flexbox, you could simply assign the div a property of flex-direction: column;

CodePudding user response：

Wrap what you want vertically in a div. By default it will stack vertically.

<div >
    <img  src="./images/desert.jpg" alt="a desert">
    <img  src="./images/person-avatar.jpg" alt="an avatar">
    
    <div style="margin-top: 10px;">
        <h1>Title goes here</h1>
        <h3>Secondary text</h3>
    </div>
    
    <p>Greyhound divisively hello coldly wonderfully marginally far
           upon excluding.</p>
</div>

Remove default margins:

h1,
h3 {
  margin: 0;
}