` tag, a headline and short introduction.
```html
A South L.A. neighborhood stands apart
Harvard Park's 2016 homicide total was its highest in at least 15 years
despite a downward trend in killings across L.A. County.
```
Next, we’ll want to create a container to hold the graphics. Give this `div` the class of `graphics-container`. Inside it, we'll add two other `divs` with the class `graphic`, one for each chart.
```{code-block} html
---
emphasize-lines: 7-14
---
A South L.A. neighborhood stands apart
Harvard Park's 2016 homicide total was its highest in at least 15 years
despite a downward trend in killings across L.A. County.
```
Now that we have containers for the iframes, let’s go back and get those iframe embed codes and paste them within the `div`s with the class `graphic`.
The iframe embed codes are located in the “Publish & Embed” step of each chart in Datawrapper. In cases where you make a chart youself, you can find the code there. In many cases, a might delegate the creation of an outside asset to colleague. Then they'll provide you with the necessary iframe code. Let's simulate that here. Here's the iframe code for the first chart.
```html
```
Copy that and paste it inside the first placeholder div in the previous code block example. Your html should look something like this at the end:
```{code-block} html
---
emphasize-lines: 9-33
---
A South L.A. neighborhood stands apart
Harvard Park's 2016 homicide total was its highest in at least 15 years
despite a downward trend in killings across L.A. County.
```
Now copy the code for the second chart.
```html
```
And paste it in the second placeholder.
```{code-block} html
---
emphasize-lines: 36-60
---
A South L.A. neighborhood stands apart
Harvard Park's 2016 homicide total was its highest in at least 15 years
despite a downward trend in killings across L.A. County.
```
At this point, you should see something like this on your page:
```{image} _static/charts/chart-preview-1.png
:width: 100%
```
## Flexbox layouts
We want the charts to be positioned side-by-side, so we will need to add some CSS. Navigate to your `app.scss` file.
We can get both charts on the same line by using [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox). Using CSS, we will target the `div` that contains both graphics (`div.graphics-container`) and make each graphic 48% of the width, with some space in between them.
```sass
div.graphics-container {
display: flex;
justify-content: space-between;
div.graphic {
flex: 0 1 48%;
}
}
```
Now that the charts are next to each other, we can see that despite our resizing in Datawrapper, they are not the same height. We’ll add a few more lines to our CSS to make both iframes the same height (`350px`) and we will also specify with media queries that on screens smaller than `500px` wide, we want the charts to be positioned one after another instead of side-by-side. This will help so that on mobile, they are not super tiny.
```{code-block} scss
---
emphasize-lines: 4-6,9-15
---
div.graphics-container {
display: flex;
justify-content: space-between;
@media (max-width: 500px) {
display: block;
}
div.graphic {
flex: 0 1 48%;
@media (max-width: 500px) {
display: block;
margin-bottom: 15px;
}
iframe {
min-height: 350px;
}
}
}
```
Congratulations, you’ve made your charts!
```{image} _static/charts/chart-preview-2.png
:width: 100%
```
Let's commit our changes and move on to our next challenge.
```bash
git add .
git commit -m "Embedded charts."
git push origin main
```