Как растянуть inpuты по всей оставшейся ширине родительского блока?

Question

[pixelSunBro]

<div class="col-xs-5 first_item">
              <div class="first_item_row">
                <h2>Основная информация</h2>
                <img src="images/up.png" alt="вверх">
              </div>
              <div class="form_row">
                <form>
                  <ul class="left_ul">
                  <li>Названи</li>
                    <li>Адрес</li>
                    <li>Телефон</li>
                    <li>E-mail</li>
                    <li>Контактное лицо</li>
                  </ul>
                  <ul class="right_ul">
                    <li><input type="text"></li>
                    <li><input type="text"></li>
                    <li><input type="text"></li>
                    <li><input type="text"></li>
                    <li><input type="text"></li>
                  </ul>
                </form>
              </div>
            </div>

<code lang="css">
.first_item {
	background-color: #FFF;
	margin: 0 15px;
	border-radius: 10px;
	padding: 0 !important;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.first_item img {
	display: inline-block;
	float: right;
	margin-top: 20px;
	margin-bottom: 10px;
}

h2 {
	font-size: 15px !important;
	font-weight: bold !important;
	display: inline-block;
	text-transform: uppercase;
}

.first_item_row {
	border-bottom: 2px solid #EBEFF2;
}

.first_item h2, .first_item img{
	 padding: 0 15px;
}

.left_ul, .right_ul {
	list-style-type: none;
	-webkit-padding-start: 0;
	display: inline-block;
	margin-bottom: 0 !important;
}

.left_ul {
	margin-left: 15px;
	text-transform: uppercase;
}

.right_ul input {
	height: 34px;
	margin: 6px 0; 
	border: none;
	background-color: #F4F4F4;
	padding: 0;
	outline: none;
}

.left_ul li {
	margin: 26px 0;
}

.left_ul :first-child {
	margin-top: 33px;
}

.left_ul :last-child {
	margin-bottom: 33px;
}
</code>

Answer 1

[Андрей]

Таки я думаю что у вас ничего не выйдет по совету сверху, input'ы упрутся в li которые упираются в ul потому что он имеет display: inline-block;
Я вроде как придумал задать им width но потом вспомнил про их мерзкое и неподобающее поведение в приличном обществе, эти их самовольные отступы, создающие проблемы (css-live.ru/articles/zagadochnye-otstupy-mezhdu-in...
Предлагаю, в рамках использования только блочных элементов, сделать что-то типа такого:
https://jsfiddle.net/2rax11f9/

Comments

[pixelSunBro]

Да! Спасибо, немного подогнал и получилось. Просто я думал есть возможность именно что растянуть инпут по оставшемуся пространству справа, а не давать обоим юл ширину в процентах.

Answer 2

[Alexander Pushkarev]

input {
	display: block;
	width:100%;
}

Comments

[pixelSunBro]

Это нужно сделать так что бы инпуты не переносились на другую строку, а были параллельно left_ul li