From f1bcd5f0dec39d8fc688345c760c2f96c383cb6a Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Sat, 20 Apr 2019 11:45:18 -0500
Subject: [PATCH] fix/add-full-solutions-to-flexbox (#35760)

---
 ...-using-the-align-items-property.english.md | 27 +++++-
 ...ng-the-justify-content-property.english.md | 27 +++++-
 ...ate-a-column-in-the-tweet-embed.english.md | 91 +++++++++++++++++-
 ...-create-rows-in-the-tweet-embed.english.md | 96 ++++++++++++++++++-
 ...play-flex-to-position-two-boxes.english.md | 25 ++++-
 ...ems-property-in-the-tweet-embed.english.md | 93 +++++++++++++++++-
 .../use-the-align-self-property.english.md    | 27 +++++-
 ...ction-property-to-make-a-column.english.md | 26 ++++-
 ...irection-property-to-make-a-row.english.md | 26 ++++-
 ...x-grow-property-to-expand-items.english.md | 26 ++++-
 ...use-the-flex-shorthand-property.english.md | 25 ++++-
 ...shrink-property-to-shrink-items.english.md | 27 +++++-
 ...roperty-to-wrap-a-row-or-column.english.md | 51 +++++++++-
 ...ent-property-in-the-tweet-embed.english.md | 94 +++++++++++++++++-
 ...der-property-to-rearrange-items.english.md | 27 +++++-
 15 files changed, 654 insertions(+), 34 deletions(-)

diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md
index a9e6e8510e..4c25f27f6d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md
@@ -73,7 +73,30 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 500px;
+    align-items: center;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 200px;
+    font-size: 24px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 200px;
+    font-size: 18px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"><p>Hello</p></div>
+  <div id="box-2"><p>Goodbye</p></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md
index cc0afbeccc..fa9568f6d4 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md
@@ -74,7 +74,30 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 500px;
+    justify-content: center;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 25%;
+    height: 100%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 25%;
+    height: 100%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md
index 011306cac6..a40403e2d9 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md
@@ -132,7 +132,94 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+    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 .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>
+  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <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>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md
index 844b419254..0580c67a23 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md
@@ -137,9 +137,97 @@ tests:
 ## Solution
 <section id='solution'>
 
-
-```js
-var code = "header {flex-direction: row;} footer {flex-direction: row;}"
+```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>
+  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <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>
 ```
-
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md
index 14b44dcc04..e789d4a995 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md
@@ -67,7 +67,28 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    height: 500px;
+    display: flex;
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md
index e2affaad68..1d9bea2fbb 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md
@@ -134,7 +134,96 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    align-items: center;
+    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 .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>
+  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <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>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md
index 24cc0e79c6..6b4f520911 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md
@@ -71,7 +71,30 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    align-self: center;
+    height: 200px;
+    width: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    align-self: flex-end;
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md
index 305d901694..fd42bbc84e 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md
@@ -67,7 +67,29 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+    flex-direction: column;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
index acd7dbdb7b..a60fe55381 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
@@ -69,7 +69,29 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+    flex-direction: row-reverse;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md
index 00b724dab7..79ca9086f6 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md
@@ -70,7 +70,29 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    height: 200px;
+    flex-grow: 1;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    height: 200px;
+    flex-grow: 2;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md
index 4f3b92edfe..94431e4b14 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md
@@ -73,7 +73,28 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    flex: 2 2 150px;
+    height: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    flex: 1 1 150px;
+    height: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md
index e2282d9aa6..167ad38dd7 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md
@@ -72,7 +72,30 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 100%;
+    height: 200px;
+    flex-shrink: 1;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 100%;
+    height: 200px;
+    flex-shrink: 2;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md
index eb49ad440a..bfcd6a8bc1 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md
@@ -95,7 +95,54 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 100%;
+    flex-wrap: wrap;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 25%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 25%;
+    height: 50%;
+  }
+  #box-3 {
+    background-color: violet;
+    width: 25%;
+    height: 50%;
+  }
+  #box-4 {
+    background-color: yellow;
+    width: 25%;
+    height: 50%;
+  }
+  #box-5 {
+    background-color: green;
+    width: 25%;
+    height: 50%;
+  }
+  #box-6 {
+    background-color: black;
+    width: 25%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+  <div id="box-3"></div>
+  <div id="box-4"></div>
+  <div id="box-5"></div>
+  <div id="box-6"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.english.md
index da46be0304..1170cec43c 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.english.md
@@ -133,9 +133,95 @@ tests:
 ## Solution
 <section id='solution'>
 
-
-```js
-var code = "header .profile-name {display: flex; flex-direction: column; justify-content: center; margin-left: 10px;}"
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    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 .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>
+  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <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>
 ```
-
 </section>
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md
index 3c7e2de754..e4e4eb77a8 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md
@@ -70,7 +70,30 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    order: 2;
+    height: 200px;
+    width: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    order: 1;
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
 ```
 </section>