Search code examples
javascripthtmlcssgetuikit

Make the second column expand by using getuikit framework

I have two columns in a line. I want the first column is a text paragraph and the second column is a textarea.

The width of the first column is 10% of the width of the line; and the second one then expand to the right. So I put the columns into uikit grid.

By uikit document, I have the code below

<hello name="{{ name }}"></hello>
<p>
   Start editing to see some magic happen :)
</p>
<div uk-grid class="uk-grid">
   <div class="uk-width-1-10" style="background: red;">
     <p>lorem</p>
  </div>
 <div class="uk-width-9-10" style="background: blue;">
   <textarea></textarea>
 </div>
</div>

Now the problem is that both two columns take the whole line. The width are not 10% vs 90%

image demo

Please see the demo on stackblize

I want to use uikit framework(https://getuikit.com/docs/width) rather than general css.

Solution

  • Divs are block elements, which mean they will take up the entire width by default. Make them inline elements by defining the below css property in style attribute.

    display: inline-block;