2021-12-03 14:20:34 -08:00
---
id: 6193f85ab1de4356da678090
title: Step 32
challengeType: 0
dashedName: step-32
---
# --description--
Now you need to align the text content of your sheet so that it appears in columns. Start with a `.row` selector to target all of your elements that have the balance values in them. Give this selector a `display` property set to `flex` , and a `justify-content` property set to `flex-end` .
# --hints--
You should have a new `.row` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.row'));
```
Your `.row` selector should have a `display` property set to `flex` .
```js
assert(new __helpers.CSSHelp(document).getStyle('.row')?.display === 'flex');
```
Your `.row` selector should have a `justify-content` property set to `flex-end` .
```js
assert(new __helpers.CSSHelp(document).getStyle('.row')?.justifyContent === 'flex-end');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > AcmeWidgetCorp Balance Sheet< / title >
< link rel = "stylesheet" type = "text/css" href = "./styles.css" / >
< / head >
< body >
< div id = "sheet" >
< div id = "header" >
< h1 > Balance Sheet< / h1 >
< h2 > AcmeWidgetCorp< / h2 >
< p class = "row" >
< span > 2019< / span >
< span > 2020< / span >
< span class = "current" > 2021< / span >
< / p >
< / div >
< h2 > Assets< / h2 >
< div class = "section" >
< p class = "row" >
< span class = "name" > Cash< / span >
< span > $25< / span >
< span > $30< / span >
< span class = "current" > $28< / span >
< / p >
< span class = "notes" > This is the cash we currently have on hand.< / span >
< p class = "row" >
< span class = "name" > Checking< / span >
< span > $54< / span >
< span > $56< / span >
< span class = "current" > $53< / span >
< / p >
< span class = "notes" > Our primary transactional account.< / span >
< p class = "row" >
< span class = "name" > Savings< / span >
< span > $500< / span >
< span > $650< / span >
< span class = "current" > $728< / span >
< / p >
< span class = "notes" > Funds set aside for emergencies.< / span >
< p class = "row total" >
< span class = "name" > Total< / span >
< span > $579< / span >
< span > $736< / span >
< span class = "current" > $809< / span >
< / p >
< / div >
< h2 > Liabilities< / h2 >
< div class = "section" >
< p class = "row" >
< span class = "name" > Loans< / span >
< span > $500< / span >
< span > $250< / span >
< span class = "current" > $0< / span >
< / p >
< span class = "notes" > The outstanding balance on our startup loan.< / span >
< p class = "row" >
< span class = "name" > Expenses< / span >
< span > $200< / span >
< span > $300< / span >
< span class = "current" > $400< / span >
< / p >
< span class = "notes" > Annual anticipated expenses, such as payroll.< / span >
< p class = "row" >
< span class = "name" > Credit< / span >
< span > $50< / span >
< span > $50< / span >
< span class = "current" > $75< / span >
< / p >
< span class = "notes" > The running balance on our line of credit.< / span >
< p class = "row total" >
< span class = "name" > Total< / span >
< span > $750< / span >
< span > $600< / span >
< span class = "current" > $475< / span >
< / p >
< / div >
< h2 > Net Worth< / h2 >
< div class = "section" >
< p class = "row total" >
< span class = "name" > Total< / span >
2021-12-22 20:18:06 +00:00
< span > -$171< / span >
2021-12-03 14:20:34 -08:00
< span > $136< / span >
< span class = "current" > $334< / span >
< / p >
< / div >
< / div >
< footer > Last Updated: December 2021< / footer >
< / body >
< / html >
```
```css
body {
text-align: center;
font-family: Tahoma;
color: #0a0a23 ;
}
#sheet {
text-align: left;
max-width: 500px;
margin: auto;
padding: 10px;
border: 2px solid #d0d0d5 ;
}
#header h2 {
font-size: 1.3em;
}
--fcc-editable-region--
--fcc-editable-region--
```
