.video-metadata{ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; } .video-metadata > .video-metadata-thumbnail-box{ grid-row: 1 / span 3; } .video-metadata > .title{ word-wrap:break-word; grid-row: 1; } .video-metadata > h2{ grid-row: 2; font-size: 15px; } .video-metadata > span{ grid-row:3; } .video-metadata > hr{ grid-row: 4; grid-column: 1 / span 2; width: 100%; } .comment-form{ display: grid; align-content: start; justify-items: start; align-items: start; } #comment-account-options{ display:grid; grid-auto-flow: column; grid-column-gap: 10px; margin-top:10px; margin-bottom:10px; } #comment-account-options a{ margin-left:10px; } .comments-area{ display:grid; } .comments-area textarea{ resize: vertical; justify-self:stretch; } .post-comment-button{ margin-top:10px; justify-self:end; } .comment-links{ display:grid; grid-auto-flow: column; grid-column-gap: 10px; justify-content:start; } .comments{ margin-top:10px; grid-row-gap: 10px; display: grid; align-content:start; } .comment{ display:grid; grid-template-columns: auto auto 100px 1fr; grid-template-rows: 0fr 0fr 0fr 0fr; background-color: #dadada; justify-content: start; } .comment .author-avatar{ grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-right: 5px; height:32px; width:32px; } .comment address{ grid-column: 2; grid-row: 1; margin-right:15px; white-space: nowrap; overflow:hidden; } .comment .text{ grid-column: 2 / span 3; grid-row: 2; white-space: pre-wrap; min-width: 0; word-wrap: break-word; } .comment time{ grid-column: 3; grid-row: 1; white-space: nowrap; } .comment .likes{ grid-column:2; grid-row:3; font-weight:bold; white-space: nowrap; } .comment .bottom-row{ grid-column:2 / span 3; grid-row:4; justify-self:start; display: grid; grid-auto-flow: column; grid-column-gap: 10px; } .more-comments{ justify-self:center; margin-top:10px; }