2018-09-30 23:01:58 +01:00
---
id: 587d78ab367417b2b2512af3
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
2019-08-05 09:17:33 -07:00
forumTopicId: 301104
2021-01-13 03:31:00 +01:00
dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
2018-09-30 23:01:58 +01:00
---
2020-11-27 19:02:05 +01:00
# --description--
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
The `header` and `footer` in the tweet embed example have child items that could be arranged as rows using the `flex-direction` property. This tells CSS to align the children horizontally.
# --instructions--
Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to row.
# --hints--
The `header` should have a `flex-direction` property set to row.
```js
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
2018-09-30 23:01:58 +01:00
```
2020-11-27 19:02:05 +01:00
The `footer` should have a `flex-direction` property set to row.
```js
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
```
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
# --seed--
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
## --seed-contents--
2018-09-30 23:01:58 +01:00
```html
< style >
body {
font-family: Arial, sans-serif;
}
header {
display: flex;
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer {
display: flex;
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
< / style >
< header >
2019-11-11 15:02:17 -06:00
< img src = "https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt = "Quincy Larson's profile picture" class = "profile-thumbnail" >
2018-09-30 23:01:58 +01:00
< div class = "profile-name" >
< h3 > Quincy Larson< / h3 >
< h4 > @ossia </ h4 >
< / div >
< div class = "follow-btn" >
< button > Follow< / button >
< / div >
< / header >
< div id = "inner" >
< p > I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.< / p >
< span class = "date" > 1:32 PM - 12 Jan 2018< / span >
< hr >
< / div >
< footer >
< div class = "stats" >
< div class = "Retweets" >
< strong > 107< / strong > Retweets
< / div >
< div class = "likes" >
< strong > 431< / strong > Likes
< / div >
< / div >
< div class = "cta" >
< button class = "share-btn" > Share< / button >
< button class = "retweet-btn" > Retweet< / button >
< button class = "like-btn" > Like< / button >
< / div >
< / footer >
```
2020-11-27 19:02:05 +01:00
# --solutions--
2018-09-30 23:01:58 +01:00
2019-04-20 11:45:18 -05:00
```html
< style >
body {
font-family: Arial, sans-serif;
}
header {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 50px;
height: 50px;
border-radius: 4px;
}
header .profile-name {
display: flex;
margin-left: 10px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
header h3, header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
footer {
display: flex;
flex-direction: row;
}
footer .stats {
display: flex;
font-size: 15px;
}
footer .stats strong {
font-size: 18px;
}
footer .stats .likes {
margin-left: 10px;
}
footer .cta {
margin-left: auto;
}
footer .cta button {
border: 0;
background: transparent;
}
< / style >
< header >
2019-11-11 15:02:17 -06:00
< img src = "https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt = "Quincy Larson's profile picture" class = "profile-thumbnail" >
2019-04-20 11:45:18 -05:00
< div class = "profile-name" >
< h3 > Quincy Larson< / h3 >
< h4 > @ossia </ h4 >
< / div >
< div class = "follow-btn" >
< button > Follow< / button >
< / div >
< / header >
< div id = "inner" >
< p > I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.< / p >
< span class = "date" > 1:32 PM - 12 Jan 2018< / span >
< hr >
< / div >
< footer >
< div class = "stats" >
< div class = "Retweets" >
< strong > 107< / strong > Retweets
< / div >
< div class = "likes" >
< strong > 431< / strong > Likes
< / div >
< / div >
< div class = "cta" >
< button class = "share-btn" > Share< / button >
< button class = "retweet-btn" > Retweet< / button >
< button class = "like-btn" > Like< / button >
< / div >
< / footer >
2018-09-30 23:01:58 +01:00
```