fix: Prevent text highlighting overlap between chips (#188)

frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap

@@ -5,6 +5,13 @@ exports[`renders correctly when disabled 1`] = `
   <p>
     featureName
   </p>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
     <react-mdl-Chip
       style={
         Object {
@@ -23,6 +30,7 @@ exports[`renders correctly when disabled 1`] = `
     >
       item2
     </react-mdl-Chip>
+  </div>
   
 </div>
 `;
@@ -32,6 +40,13 @@ exports[`renders strategy with empty list as param 1`] = `
   <p>
     featureName
   </p>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  />
   <div
     style={
       Object {
@@ -73,6 +88,13 @@ exports[`renders strategy with list as param 1`] = `
   <p>
     featureName
   </p>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
     <react-mdl-Chip
       onClose={[Function]}
       style={
@@ -93,6 +115,7 @@ exports[`renders strategy with list as param 1`] = `
     >
       item2
     </react-mdl-Chip>
+  </div>
   <div
     style={
       Object {

frontend/src/component/feature/form/strategy-input-list.jsx

@@ -54,6 +54,8 @@ export default class InputList extends Component {
         return (
             <div>
                 <p>{name}</p>
+
+                <div style={{ display: 'flex' }}>
                     {list.map((entryValue, index) => (
                         <Chip
                             key={index + entryValue}
@@ -63,6 +65,7 @@ export default class InputList extends Component {
                             {entryValue}
                         </Chip>
                     ))}
+                </div>
 
                 {disabled ? (
                     ''