Javascript-форум - Как правильно сверстать?!

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как правильно сверстать?! (https://javascript.ru/forum/dom-window/64880-kak-pravilno-sverstat.html)

Как правильно сверстать?!

В диве должна находиться форма с тремя инпутами, которые тянутся на 100% ширины блока. Причем каждое поле имеет имя произвольной ширины (см. рис.)

Какие есть предложения?

Уже всё что хочешь перепробовал!!!!

Franky83,
А если таблицу?

<table style='position: absolute;margin-left:-10px; width:100%'>
       <tr>
           <td style='width:200px'>наименование первой строки произвольной длины</td>
            <td><input type='text' style='width:100%;border:1px solid black'/></td>
       </tr>
       <tr>
           <td style='width:200px'>наименование второй строки </td>
            <td><input type='text' style='width:100%;border:1px solid black'/></td>
       </tr>
       <tr>
           <td style='width:200px'>третья строка</td>
            <td><input type='text' style='width:100%;border:1px solid black'/></td>
       </tr>
   </table>

Спасибо за Ваше решение. Но надо чтобы в одну строку всё было.
Средствами css не знаю как сделать. С помощью JS , вот так у меня получилось ;)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>


    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('.textField').each(function (inx, item) {

                var parent = $(item).parent().outerWidth();
                var span = $(item).outerWidth();
                var input = $('<input/>').attr({type: 'text', class: 'd'});

                $(input).width(parent - span - 20);
                $(input).insertAfter(item);
            });


        })
    </script>
    <style>

        .main {
            position: relative;
            width: 600px;
            padding: 10px 0;
            background-color: #f35800;
        }

        .dd {
            position: relative;
            margin: 10px;
        }

        .d {
            position: absolute;
            width: 100%;
        }

        .textField {
            padding: 0 20px;

        }
    </style>
</head>
<body>
<div class="main">
    <div class="dd">
        <span class="textField">Subject: </span>

    </div>
    <div class="dd">
        <span class="textField">From: </span>

    </div>
    <div class="dd">
        <span class="textField">To: </span>

    </div>
</div>
</body>
</html>

Franky83, просто так не делается. Хотя бы потому, что лейбл может быть назван по желанию заказчика вот так "Количество поступлений за неделю". И капец твоему инпуту. Хочешь сам себя загнать в анус из-за дизигна? 200 ОК

Franky83,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
       <style>
    .main{
      position:relative;
      width:600px;
      padding:10px 0;
      background-color:#f35800;
    }

    .dd{
      display:flex;
      position:relative;
      margin:10px;
    }

    .d{
      flex-grow:1;
    }

    .textField{
      padding:0 20px;
    }
    </style>
</head>
<body>
<div class="main">
    <div class="dd">
        <span class="textField">Subject: </span><input type="text" class="d">

    </div>
    <div class="dd">
        <span class="textField">From: </span><input type="text" class="d">

    </div>
    <div class="dd">
        <span class="textField">To: </span><input type="text" class="d">

    </div>
</div>
</body>
</html>

Рони , ты лучший )