Basic row layout with lines between CRUD documents

src/components/AddCrudItem/index.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 
 import Field from 'components/Field';
 
+import './style.scss';
+
 function getEmptyValue(type) {
     if (type === 'text' || type === 'textarea') {
         return '';
@@ -66,7 +68,9 @@ export default class AddCrudItem extends Component {
                 <div className="fields">
                     {fields}
                 </div>
-                <button className="button-add" onClick={this.onCreate}>{'Add'}</button>
+                <div className="meta">
+                    <button className="button-add" onClick={this.onCreate}>{'Add'}</button>
+                </div>
             </div>
         );
     }

src/components/AddCrudItem/style.scss

@@ -0,0 +1,12 @@
+.add-field-wrapper {
+    display: flex;
+
+    .fields {
+        flex: 4;
+    }
+
+    .meta {
+        flex: 1;
+    }
+}
+

src/components/CrudDocument/style.scss

@@ -1,8 +1,29 @@
 @import '~variables';
 
 .crud-document-wrapper {
+    display: flex;
+    margin: 0 0 0.5em 0;
+    padding: 0.5em 0 0 0;
+    align-items: center;
+
+    border-top: 1px solid $color-grey-light;
+
+    &:first-child {
+        border-top: 0;
+    }
+
     &.pending {
         opacity: $opacity-pending;
     }
+
+    .fields-list {
+        display: flex;
+        flex: 4;
+        flex-flow: column;
+    }
+
+    .meta {
+        flex: 1;
+    }
 }
 

src/components/CrudField/style.scss

@@ -0,0 +1,11 @@
+.crud-field {
+    white-space: normal;
+
+    &:nth-child(1) {
+        font-size: 95%;
+    }
+    &:nth-child(2) {
+        font-size: 90%;
+    }
+}
+

src/sass/variables.scss

@@ -1,4 +1,5 @@
 $color-grey-md: #999;
+$color-grey-light: #ccc;
 
 $color-primary: #ffaf28;
 $color-secondary: #2a0072;