[FIX] Progress history layout

Align table cells correctly

src/History.js

@@ -225,11 +225,13 @@ export default class History extends Component {
 																<PeopleRoundedIcon />
 															}
 														</p>
+														<p>
 															<Button
 																className="button--no-background"
 																onClick={() => this.deleteProgress(progressItem.id)}
 																icon={<DeleteRoundedIcon />}
 															></Button>
+														</p>
 													</div>
 												)
 											}
@@ -261,6 +263,7 @@ export default class History extends Component {
 														<p>{progressItem.percentageProgress}%</p>
 														<p>{progressItem.correct}/{progressItem.progress}</p>
 														<p>{progressItem.grade}%</p>
+														<p>
 															{
 																progressItem.mode === "questions"
 																?
@@ -268,6 +271,7 @@ export default class History extends Component {
 																:
 																<PeopleRoundedIcon />
 															}
+														</p>
 													</div>
 												)	
 											}

src/LoggedInHome.js

@@ -300,11 +300,13 @@ export default withRouter(class LoggedInHome extends React.Component {
 														<PeopleRoundedIcon />
 												}
 											</p>
+											<p>
 												<Button
 													className="button--no-background"
 													onClick={() => this.deleteProgress(progressItem.id)}
 													icon={<DeleteRoundedIcon />}
 												></Button>
+											</p>
 										</div>
 									)
 								}

src/css/App.css

@@ -347,11 +347,19 @@ label, p, input[type=text], main > span, main div > span {
 	text-decoration: none;
 	color: inherit;
   border-left: 8px solid transparent;
+  text-align: center;
+  vertical-align: top;
 }
 
 .progress-history-container > div > *:first-child {
   border-left: 0;
   word-break: break-all;
+  text-align: left;
+}
+
+.progress-history-container .button.button--no-background {
+  padding: 0;
+  margin: 0;
 }
 
 @media screen and (max-width: 420px) {