Line break through CSS

Question

I want to insert a line break using CSS, there are two classes : select2-search-field and select2-search-choice they are coming in same div as li element Could please suggest any way I could break them to populate in two lines.

I have tried : How to insert a line break before an element using CSS

Following is the code snippet for which I want to achieve line break in

between class "select2-search-choice" and "select2-search-field"

<div class="counterPartyId">
 <ul class="select2-choices">
 <li class="select2-search-choice">
 <div>ABN nv,</div>
 </li>
 <li class="select2-search-field" >
 <label for="s2id_autogen5" class="select2-offscreen"></label>
 <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7">
 </li>
 </ul>
</div>

• connexo: Please indent your code properly.
• Alohci: Where's your existing CSS?
• Huelfe: li.select2-search-choice, li.select2-search-field { display: block; }
• Sir HC: Have a look on this answer. You only need the "after" selector: How to insert a line break before an element using CSS

Answer 1

use css code " display: block "

li {
 display: block;
 }

<div class="counterPartyId">
 <ul class="select2-choices"> 
 <li class="select2-search-choice"> 
 <div>ABN nv,</div> 
 </li>
 <li class="select2-search-field" > 
 <label for="s2id_autogen5" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7"> 
 </li>
 </ul>
</div>

Answer 2

You just need to add 'display: block' to the li's if you want them to occupy each one row

ul li { display: block; }

<div class="counterPartyId">
 <ul class="select2-choices"> 
 <li class="select2-search-choice"> 
 <div>ABN nv,</div> 
 </li>
 <li class="select2-search-field" > 
 <label for="s2id_autogen5" class="select2-offscreen"></label> 
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7"> 
 </li>
 </ul>
</div>