can someone please help me I have this example here, I need the col that has the biggest text, the col infront of that to take the same height not all the other columns I tried something like this but it always takes the height for all.. :/ Can you help me please?
body
{
margin: 0;
}
#matchline-dynamic {
width: 400px;
background-color: #f2f2f2;
border: solid 1px #b7b7b7;
font-family: Roboto;
font-size: 16px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #000000;
}.col-xs-6 {
width: 50%;
}
#matchline-static {
background: white;
font-family: Roboto;
font-size: 16px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #000000;
border: 1px solid #e8e8e8;
}
.wrapper2
{
display: flex;
flex-direction: row;
height: 100%;
}
.boxi
{
height: 100px;
}<div class="wrapper2">
<div class="col-xs-6 ">
<ul id="matchline-ul" class="todo-list matchline-options ui-sortable">
<li id="matchline-static" class=" boxi">
<span class="width-100" id="match-lines-options">
<input type="hidden" name="1024[]" value="1">
<div id="take-match-line-answer-text">
<span class="text padding-right-20">asdasd</span>
</div>
</span>
</li>
<li id="matchline-static" class=" boxi">
<span class="width-100" id="match-lines-options">
<input type="hidden" name="1024[]" value="0">
<div id="take-match-line-answer-text">
<span class="text padding-right-20">sdfsdf</span>
</div>
</span>
</li>
<li id="matchline-static" class=" boxi">
<span class="width-100" id="match-lines-options">
<input type="hidden" name="1024[]" value="3">
<div id="take-match-line-answer-text">
<span class="text padding-right-20">asd</span>
</div>
</span>
</li>
<li id="matchline-static" class=" boxi">
<span class="width-100" id="match-lines-options">
<input type="hidden" name="1024[]" value="2">
<div id="take-match-line-answer-text">
<span class="text padding-right-20">s simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and s</span>
</div>
</span>
</li>
</ul>
</div>
<div class="col-xs-6 ">
<ul class="todo-list ui-sortable">
<li id="matchline-dynamic" class=" boxi">
<span class="handle width-100 ui-sortable-handle">
<input type="hidden" name="1024[]" value="3">
<div id="take-order-answer-text">
<i class="fa fa-bars"></i>
</div>
<div class="float-left">
<span class="text padding-left-10">s simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and s</span>
</div>
</span>
</li>
<li id="matchline-dynamic" class=" boxi">
<span class="handle width-100 ui-sortable-handle">
<input type="hidden" name="1024[]" value="2">
<div id="take-order-answer-text">
<i class="fa fa-bars"></i>
</div>
<div class="float-left">
<span class="text padding-left-10">sdf</span>
</div>
</span>
</li>
<li id="matchline-dynamic" class="boxi">
<span class="handle width-100 ui-sortable-handle">
<input type="hidden" name="1024[]" value="0">
<div id="take-order-answer-text">
<i class="fa fa-bars"></i>
</div>
<div class="float-left">
<span class="text padding-left-10">sdf</span>
</div>
</span>
</li>
<li id="matchline-dynamic" class=" boxi">
<span class="handle width-100 ui-sortable-handle">
<input type="hidden" name="1024[]" value="1">
<div id="take-order-answer-text">
<i class="fa fa-bars"></i>
</div>
<div class="float-left">
<span class="text padding-left-10">lasdh ajhsdg kjahgsdkhafsdgasdchhj adjkajsd</span>
</div>
</span>
</li>
</ul>
</div>
</div>So I thought It would work something with the child, but I am new in coding and dont know ..
