Материал AngularJs (или, может быть, просто CSS) - Как выровнять столбцы между строками?

Question

Чтобы дать пример того, что я имею в виду, скажем, у меня есть три точки данных, которые я хочу отобразить: имя, должность, должность.Это плохой пример, поскольку эти вещи, как правило, описывают сами себя, но, скажем, я хочу изложить их следующим образом:

Name: [name]       Office: [office]
Title: [title]

Кроме того, у меня будет список из нескольких человек, каждый из которых будет отображать эти атрибуты.

Прямо сейчас я пытаюсь сделать «Имя: / Заголовок» в столбце «[имя] [заголовок]» в столбце, а «Офис:» в столбце.и "[офис]" в столбце.Проблема состоит в том, что быстро становится громоздким, поскольку связанные данные находятся в совершенно разных местах в HTML, и это приводит к потенциальному рассинхронизированию информации в заголовки (например, если переносится одна строка, то все строки под ней будут смещены от заголовка на1 размер строки).Я также хочу убедиться, что расположение столбцов у разных пользователей одинаковое (так что кто-то по имени «Боб» и кто-то по имени «Джон Джейкоб Джинглхаймер Шмидт» оба выровняли бы свой столбец «Office:», несмотря на то, что их имена были разной длины).

Каков рекомендуемый подход для чего-то подобного?Пытаясь использовать AngularJS Material, буду ли я использовать md-сетку, несмотря на то, что она не является однородной мозаичной информацией?Или это более очевидный подход, который я просто не вижу, используя свойства layout-align с обычными контейнерами?Или лучше использовать простой CSS, чтобы установить более жесткие местоположения для столбцов заголовка и просто позволить данным соответствующим образом изгибаться?

В качестве альтернативы, есть ли лучший рекомендуемый стиль для отображения такого рода информации, это больше "материальный дизайн"?Обратите внимание, что заголовки требуются на 100%, потому что может быть не сразу очевидно, что представляет каждая часть данных, из-за характера данных, с которыми я на самом деле работаю (например, я отображаю как офисные, так и мобильные номера, поэтому мне нужночеткий способ различить два), но если есть лучший способ организовать эти пары заголовок / данные, я все для изучения этого маршрута.

РЕДАКТИРОВАТЬ: Вот фрагмент кода (отредактированный, чтобы удалить любые фактические данные / функциональные возможности, но только чтобы понять суть).Это WIP, поэтому он не предназначен, чтобы быть хорошим, но я уже могу сказать, что этот подход не сработает вообще.

            <md-list-item>
                    <div layout="column">
                        <md-button class="md-button" ng-click="placeholder">
                            <a layout="row" >
                                [Name]
                            </a>
                            <div layout="row" layout-align="center">
                                [Title]
                            </div>
                        </md-button>
                    </div>
                    <div layout="row">
                        <div layout="column">
                            <div layout="row">
                                Mobile:
                            </div>
                            <div layout="row">
                                Office: 
                            </div>
                            <div layout="row">
                                E-mail: 
                            </div>
                        </div>
                        <div layout="column">
                            <div layout="row">
                                [mobile]
                            </div>
                            <div layout="row">
                                [office]
                            </div>
                            <div layout="row">
                                <a href="mailto:[email]" class="one-place-link">[email]</a>
                            </div>
                        </div>
                        <div layout="column">
                            <div layout="row">
                                Field1: 
                            </div>
                            <div layout="row">
                                Field2: 
                            </div>
                        </div>
                        <div layout="column">
                            <div layout="row">
                                [field1]
                            </div>
                            <div layout="row">
                                [field2]
                            </div>
                        </div>
                    </div>
                <md-divider></md-divider>
            </md-list-item>

Это частично работоспособно для каждого элемента, но при этом подходе выравнивание между объектами отсутствует.Первый столбец (имя и заголовок) имеет ширину от 100 до 250 пикселей для разных пользователей, а второй столбец (номера телефонов и адрес электронной почты) непосредственно следуют его примеру, и выглядит он очень грязно.Кроме того, слабое спаривание между заголовками и данными делает расширение этого неудобным и делает необязательными свойства, которые можно отключить в настройках, которые ужасно поддерживать, так как я должен проверить настройки как для заголовка, так и для данных.

EDIT2: https://jsfiddle.net/pb2gqLm6/

Вот пример того, что я имею в виду.Мне бы хотелось, чтобы столбец «Office: / Mobile: Email:» был выровнен по ВСЕМ пользователям, а не смещен в зависимости от длины имени.Я знаю, что могу сделать это с заданными размерами столбцов и / или шириной в процентах, но я хочу знать, есть ли лучший подход, который я должен использовать здесь.