Форма с 2 столбцами с использованием Material Design Lite

Это мой код, который отображает форму:я хочу, чтобы field1 и field2 были в соответствии с жирными заголовками (справа и слева) также текстовые поля, чтобы быть ближе к меткам (поля) я использую компонент сетки MDL. но я не получаю желаемого макета. Сначала я пытался без вложенности полей под заголовками, но это не сработало, поэтому теперь я вложил их. Есть ли другой путь?

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</head>
<body>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col padding-top-bottom0"><strong>LEFT</strong>
                    <div class="mdl-grid padding-top-bottom0 b-form">
                        <div class="mdl-cell">Field1</div>
                        <div class="mdl-cell">
                            <div class="mdl-textfield mdl-js-textfield margin-top-bottom0 padding-top-bottom0" style="width: 100% !important;">
                                <input class="mdl-textfield__input b-form-input" type="text"/>
                            </div>
                        </div>
                    </div>

                    <div class="mdl-grid padding-top-bottom0 b-form">
                        <div class="mdl-cell">Field2</div>
                        <div class="mdl-cell">
                            <div class="mdl-textfield mdl-js-textfield margin-top-bottom0 padding-top-bottom0" style="width: 100% !important;">
                                <input class="mdl-textfield__input b-form-input" type="text"/>
                            </div>
                        </div>
                    </div>
                  </div> 
                <div class="mdl-cell mdl-cell--6-col padding-top-bottom0"><strong>RIGHT</strong>
                    <div class="mdl-grid padding-top-bottom0 b-form">
                        <div class="mdl-cell">Field1</div>
                        <div class="mdl-cell">
                            <div class="mdl-textfield mdl-js-textfield margin-top-bottom0 padding-top-bottom0" style="width: 100% !important;">
                                <input class="mdl-textfield__input b-form-input" type="text"/>
                            </div>
                        </div>
                    </div>

                    <div class="mdl-grid padding-top-bottom0 b-form">
                        <div class="mdl-cell">Field2</div>
                        <div class="mdl-cell">
                            <div class="mdl-textfield mdl-js-textfield margin-top-bottom0 padding-top-bottom0" style="width: 100% !important;">
                                <input class="mdl-textfield__input b-form-input" type="text"/>
                            </div>
                        </div>
                    </div>
                </div> 
                    </div><!-- closing grid -->

Это снимок экрана вывода.

1 ответ