CSS Styling how to show specific bullets in one line

Question

In the following example I'd like to have items 2 and 3 to appear side-by-side and the rest to remain as a stacked unordered list. How to do this in css?

<li><i class="icon-caret-right"></i>textone</li>
<li><i class="icon-caret-right"></i>texttwo</li>
<li><i class="icon-caret-right"></i>textthree</li>
<li><i class="icon-caret-right"></i>textfour</li>

this code shows like this below.

textone

texttwo

textthree

textfour

But I want to show this as this image below. How to do this in CSS?

Answer 1

A simple float and a margin should do it.

.stack {
    float: left;
    margin: 0 20px 0 0;
}

<li><i class="icon-caret-right"></i>textone</li>
<li class="stack"><i class="icon-caret-right"></i>texttwo</li>
<li><i class="icon-caret-right"></i>textthree</li>
<li><i class="icon-caret-right"></i>textfour</li>

Answer 2

If flexbox is an option, you can use a wrapping flexbox:

1. Each flex item will have 100% flex-basis

2. The second and third items will have auto flex-basis

This will make 2 and 3 to come in the same line - see demo below:

ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
ul > li {
  flex: 1 1 100%;
}
ul > li:nth-child(2), ul > li:nth-child(3) {
  flex: 1 1 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul>
  <li>textone</li>
  <li>texttwo</li>
  <li>textthree</li>
  <li>textfour</li>
</ul>