diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
index 259a23055..3353749db 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
@@ -1,4 +1,5 @@
 /*
+*  __FLEX-TABLE_________
 *  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
 */
 
@@ -40,7 +41,7 @@ div.flex-table {
 }
 
 /*
-* Bloc appearance
+* BLOC appearance
 */
 
 div.flex-bloc {
@@ -87,7 +88,7 @@ div.flex-bloc {
 }
 
 /*
-* Table appearance
+* TABLE appearance
 */
 
 div.flex-table {
@@ -107,6 +108,10 @@ div.flex-table {
         div.item-row {
             flex-direction: row;
 
+            &:first-child {
+                align-items: baseline; //
+            }
+
             &.separator {
                 margin-top: 0.5em;
                 border-top: 1px dotted $gray-900;
@@ -130,7 +135,7 @@ div.flex-table {
                 }
             }
 
-            @media only screen and (max-width: 900px) {
+            @include media-breakpoint-down(md) {
                 flex-direction: column;
                 div.item-col {
                     &:last-child {
@@ -143,3 +148,58 @@ div.flex-table {
         }
     }
 }
+
+/*
+*  __WRAP-LIST-INLINE_________
+*  FLEX RESPONSIVE INLINE DEFINITION LIST
+*/
+
+div.wraplist {
+    padding: 0;
+    width: 100%;
+
+    div.wl-row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        div.wl-col.title {
+            width: auto;
+
+            @include media-breakpoint-up(md) {
+                margin-left: 1.5em;
+            }
+
+            & > * {
+                padding-right: 1em;
+            }
+        }
+
+        div.wl-col.list {
+            width: 75%;
+            margin: auto 0 0 auto;
+
+            p.wl-item {
+                margin: 0.1em;
+                padding: 0em;
+                display: inline-block;
+            }
+        }
+    }
+
+    &.debug .wl-row {
+        border: 1px solid $black;
+
+        div.wl-col.title {
+            background-color: $yellow;
+        }
+        div.wl-col.list {
+            background-color: $green;
+
+            p.wl-item {
+                background-color: $orange;
+            }
+        }
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
index 8ad71196e..90a1462bf 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig
@@ -9,19 +9,20 @@
                             <i class="fa fa-fw fa-random"></i>
                             <b>{{ accompanying_period.id }}</b>
                         </span>
+                        {% if accompanying_period.emergency %}
+                            <span class="badge bg-danger">{{- 'Emergency'|trans|upper -}}</span>
+                        {% endif %}
+                        {% if accompanying_period.confidential %}
+                            <span class="badge bg-danger">{{- 'Confidential'|trans|upper -}}</span>
+                        {% endif %}
+                    </div>
+                    <div class="item-col">
                         {% if accompanying_period.step == 'DRAFT' %}
                             <span class="badge bg-secondary">{{- 'Draft'|trans|upper -}}</span>
                         {% else %}
                             <span class="badge bg-success">{{- 'Confirmed'|trans|upper -}}</span>
                         {% endif %}
-                        {% if accompanying_period.emergency %}
-                            <span class="badge bg-danger">{{- 'Emergency'|trans|upper -}}</span>
-                        {% endif %}
-                        {% if accompanying_period.confidential %}
-                            <span class="badge bg-warning">{{- 'Confidential'|trans|upper -}}</span>
-                        {% endif %}
                     </div>
-                    <div class="item-col"></div>
                 </div>
                 <div class="item-row">
                     <div class="item-col">
@@ -52,49 +53,65 @@
                 </div>
 
                 <div class="item-row separator">
-                    <div class="item-col"><h3>{{ 'Participants'|trans }}</h3></div>
-                    <div class="item-col">
-                        {% if accompanying_period.participations.count > 0 %}
-                            {% for p in accompanying_period.participations %}
-                            <p>
-                                <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
-                                    {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
-                                </a>
-                            </p>
-                            {% endfor %}
-                        {% else %}
-                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                        {% endif %}
+                    <div class="wraplist">
+                        <div class="wl-row">
+                            <div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>
+                            <div class="wl-col list">
+                                {% if accompanying_period.participations.count > 0 %}
+                                    {% for p in accompanying_period.participations %}
+                                    <p class="wl-item">
+                                        <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
+                                            {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
+                                        </a>
+                                    </p>
+                                    {% endfor %}
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                                {% endif %}
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="item-row">
-                    <div class="item-col"><h3>{{ 'Requestor'|trans }}</h3></div>
-                    <div class="item-col">
-                        {% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
-                            {% if accompanying_period.requestorPerson is not null %}
-                                <p>
-                                    {{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}
-                                </p>
-                            {% endif %}
-                            {% if accompanying_period.requestorThirdParty is not null %}
-                                <p>
-                                    {{ accompanying_period.requestorThirdParty.name }}
-                                </p>
-                            {% endif %}
-                        {% else %}
-                            <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                        {% endif %}
+                    <div class="wraplist">
+                        <div class="wl-row">
+                            <div class="wl-col title"><h3>{{ 'Requestor'|trans }}</h3></div>
+                            <div class="wl-col list">
+                                {% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
+                                    {% if accompanying_period.requestorPerson is not null %}
+                                        <p class="wl-item">
+                                            {{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}
+                                        </p>
+                                    {% endif %}
+                                    {% if accompanying_period.requestorThirdParty is not null %}
+                                        <p class="wl-item">
+                                            {{ accompanying_period.requestorThirdParty.name }}
+                                        </p>
+                                    {% endif %}
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                                {% endif %}
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="item-row">
-                    <h3>{{ 'Social issues'|trans }}</h3>
-                    {% if accompanying_period.socialIssues.count > 0 %}
-                        {% for si in accompanying_period.socialIssues %}
-                        <p>{{ si.title|localize_translatable_string }}</p>
-                        {% endfor %}
-                    {% else %}
-                        <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
-                    {% endif %}
+                    <div class="wraplist">
+                        <div class="wl-row">
+                            <div class="wl-col title"><h3>{{ 'Social issues'|trans }}</h3></div>
+                            <div class="wl-col list">
+                                {% if accompanying_period.socialIssues.count > 0 %}
+                                    {% for si in accompanying_period.socialIssues %}
+                                        <p class="wl-item">
+                                            {{ si.title|localize_translatable_string }}
+                                        </p>
+                                    {% endfor %}
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="item-row separator">