С float
это вряд ли получится сделать. Можно с position: absolute
прижать к низу:
.wrapper {
width: 800px;
height: 400px;
padding: 40px;
background: gray;
}
.main {
width: 100%;
background: yellow;
overflow: hidden;
padding-left: 88px;
position: relative;
}
.text {
position: absolute;
left: 0;
bottom: 0;
background: orange;
margin-right: 10px;
font-size: 20px;
}
.input-wrap {
max-width: 100%;
overflow: hidden;
}
.input {
width: 100%;
font-size: 24px;
}
<div class="wrapper">
<div class="main">
<div class="text">
<span>Телефон:</span>
</div>
<div class="input-wrap">
<input type="text" class="input" placeholder="+7 926 987-65-43" /></div>
</div>
</div>
Вариант с absolute
на всю высоту:
.wrapper {
width: 800px;
height: 400px;
padding: 40px;
background: gray;
}
.main {
width: 100%;
background: yellow;
overflow: hidden;
padding-left: 88px;
position: relative;
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: orange;
margin-right: 10px;
font-size: 20px;
}
.input-wrap {
max-width: 100%;
overflow: hidden;
}
.input {
width: 100%;
font-size: 24px;
}
<div class="wrapper">
<div class="main">
<div class="text">
<span>Телефон:</span>
</div>
<div class="input-wrap">
<input type="text" class="input" placeholder="+7 926 987-65-43" /></div>
</div>
</div>
flex :
.wrapper {
width: 800px;
height: 400px;
padding: 40px;
background: gray;
}
.main {
width: 100%;
background: yellow;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.text {
background: orange;
margin-right: 10px;
font-size: 20px;
}
.input-wrap {
max-width: 100%;
width: 100%;
overflow: hidden;
}
.input {
width: 100%;
font-size: 24px;
}
<div class="wrapper">
<div class="main">
<div class="text">
<span>Телефон:</span>
</div>
<div class="input-wrap">
<input type="text" class="input" placeholder="+7 926 987-65-43" /></div>
</div>
</div>
Вариант с flex
на всю высоту:
.wrapper {
width: 800px;
height: 400px;
padding: 40px;
background: gray;
}
.main {
width: 100%;
background: yellow;
overflow: hidden;
display: flex;
}
.text {
background: orange;
margin-right: 10px;
font-size: 20px;
}
.input-wrap {
max-width: 100%;
width: 100%;
overflow: hidden;
}
.input {
width: 100%;
font-size: 24px;
}
<div class="wrapper">
<div class="main">
<div class="text">
<span>Телефон:</span>
</div>
<div class="input-wrap">
<input type="text" class="input" placeholder="+7 926 987-65-43" /></div>
</div>
</div>
table
:
.wrapper {
width: 800px;
height: 400px;
padding: 40px;
background: gray;
}
.main {
width: 100%;
background: yellow;
overflow: hidden;
display: table;
}
.text {
display: table-cell;
vertical-align: bottom;
background: orange;
margin-right: 10px;
font-size: 20px;
}
.input-wrap {
max-width: 100%;
width: 100%;
overflow: hidden;
}
.input {
width: 100%;
font-size: 24px;
}
<div class="wrapper">
<div class="main">
<div class="text">
<span>Телефон:</span>
</div>
<div class="input-wrap">
<input type="text" class="input" placeholder="+7 926 987-65-43" /></div>
</div>
</div>
P.S: если я правильно понимаю задание.