Div ширина и выравнивание текстового поля и расширение родителя (отзывчивый)

Question

У меня есть следующий список в HTML:

<style> 
    .right { display: inline-block; } 
</style> 

<ul class="no-bullets-list"> 
    <li> 
    <div class="list-item"> 
    <h1>Some Text</h1> 
    <img src="image-URL"/> 
    <div class="right"> 
      <input type="text"/> 
     <textarea></textarea> 
    </div> 
    </div> 
</li> 
</ul> 

Я хочу, чтобы показать эти элементы, такие как изображения (простите за изображение, кстати :))

Проблема, с которой я столкнулась, заключается в том, что div с классом = «право» не расширяется до размера родителя, и, следовательно, текстовое поле не растет соответственно. Мне нужно иметь возможность динамически изменять размер, поэтому div и текстовое поле должны отвечать вслух.

Любые идеи? Я могу использовать bootstrap, поэтому, если у кого-то есть решение, использующее его.

Благодаря

Answer 1

высота и ширина в текстовой определяются их «строки» и «значений столбцов». Это статические значения, поэтому они не меняются в зависимости от того, какое устройство просматривает их. Вы могли бы заглянуть в javascript-решения, но это, вероятно, больше усилий, чем его ценность. Только мои два цента. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea