Как я могу держать два элемента рядом друг с другом?

Question

У меня есть этот HTML:

.parent{ 
 
    border: 1px solid; 
 
    width: 70%; 
 
} 
 

 
.title{ 
 
    width: 50px; 
 
} 
 

 
.input { 
 
}

<div class="parent"> 
 
    <span class="title">title: </span> 
 
    <input class="input" name="title" type="text"> 
 
</div>

Мне нужно установить width: 100%; для .input элемента. Но когда я это делаю, происходит в одной строке. Я имею в виду, что в этом случае оба .title и .input больше не будут в одной строке. Как я могу держать их в одной строке, а также заполнять всю ширину своих родителей (.parent)?

Примечание:There are some ways либо с помощью flex или calc() .. но на самом деле большинство пользователей моего веб-сайта использовать старые браузеры. во всяком случае, я ищу подход, который поддерживает старые браузеры.

Answer 1

Я думаю, что вы будете иметь, чтобы использовать дисплей таблицы ячейки, если сгибать не вариант для вас:

.parent { 
 
    display: table; 
 
    width: 100%; 
 
    } 
 

 
.title { 
 
    display: table-cell; 
 
    } 
 

 
.input { 
 
    display: table-cell; 
 
    width: 100%; 
 
    }

<div class="parent"> 
 
    <span class="title">title:</span> 
 
    <input class="input" name="title" type="text"> 
 
</div>

Answer 2

.parent{ 
 
    border: 1px solid; 
 
    width: 70%; 
 
    display:table; 
 
    padding: 0 10px; 
 
} 
 

 
.title, 
 
.input{ 
 
    display: table-cell; 
 
} 
 

 
.input { 
 
    width:100%; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
}

<div class="parent"> 
 
    <span class="title">title: </span> 
 
    <input class="input" name="title" type="text"> 
 
</div>

Answer 3

Flexbox это лучший способ, но если вы не можете его использовать, есть другие варианты. Если вам хорошо сменить элемент .title, чтобы использовать процент вместо ширины 50 пикселей, вы можете достичь того, чего хотите, используя float.

.parent { 
 
    border: 1px solid; 
 
    width: 70%; 
 
} 
 

 
/* Micro clearfix so the parent does not collapse */ 
 
.parent:after { 
 
    content: ' '; 
 
    clear: both; 
 
    display: inline-block; 
 
} 
 

 
.title { 
 
    float: left; 
 
    width: 15%; 
 
} 
 

 
.input { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    float: left; 
 
    width: 85%; 
 
}

<div class="parent"> 
 
    <span class="title">title: </span> 
 
    <input class="input" name="title" type="text"> 
 
</div>