Who can help to modify RecentArticle widget layout

[SilverBoy]

Hi

I want to change the template of recent articles widget to looks like the picture, I think it is easy but I don't have experience in CSS stuff.

Attachment 153332

I want some one to explain to me how I can divide results to 2 columns, and in this CSS the main column contain only one article with preview text and the other column contain 4 articles with title only.

Thanks in advance.

[SilverBoy]

I used this code to implement this layout

<div class="cms_widget">
     <div class="block">
          <div class="cms_widget_header">
               <h3>{vb:raw widget_title}</h3>
          </div>
          <div class="cms_widget_content widget_content">
               <div class="list-box">
                    <ul>
                        <vb:each from="articles" key="contentid" value="article">
                                 <vb:if condition="$article['num'] == 1">
                                        <li class="first-news">
                                            <div class="cms_widget_post_bit widget_post_bit">
                                                 <div><a href="{vb:raw article.page_url}">
                                                 <img style="border: 3px solid #FFFFFF; float: right; margin: 7px; outline: 1px solid #C8C8C8;" alt="{vb:raw article.title}" src="{vb:raw article.previewimage}" width="390" height="220px" />
                                                 </a></div>
                                                 <vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
                                                        <h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
                                                 </vb:if>
                                                 {vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a>
                                                 <a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"></a>
                                            </div>
                                        </li>
                                 <vb:else />
                                          <li class="other-news">
                                              <div class="cms_widget_post_bit widget_post_bit">
                                                   <a href="{vb:raw article.page_url}">
                                                   <img style="border: 3px solid #FFFFFF; float: right; margin: 7px; outline: 1px solid #C8C8C8;" alt="{vb:raw article.title}" src="{vb:raw article.previewimage}&amp;thumb=1&amp;stc=1" width="100px" height="66px" /></a>
                                                   <div class="cms_widget_content widget_content">
                                                        <vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
                                                               <a href="{vb:raw article.page_url}">{vb:raw article.title}</a>
                                                        </vb:if>
                                                   </div>
                                              </div>
                                          </li>
                                 </vb:if>
                        </vb:each>
                    </ul>
                    <div class="clear"> </div>
               </div>
          </div>
     </div>
</div>

and in additional CSS I added this code

.list-box li {
    clear: left;
    float: left;
    overflow: hidden;
    padding: 10px;
    width: 50%;
}
.list-box li.other-news {
    border-right: 3px solid #eaeaea;
}
.list-box li.first-news {
    float: right;
    padding: 15px;
}
*, *::before, *::after{
box-sizing: border-box;
}

every thing works great, but this part of code making truples in alot of site parts

*, *::before, *::after{
box-sizing: border-box;
}

for example, user drop down menu appear like a mixing rows, so do you have any suggestion to solve this problem??