Arranging div elements using css floats

Question

I have the following div elements that are generated randomly so I can't make changes to a single div element.Here is the example http://jsfiddle.net/y638o46h/2/ .But I need a particular change. I want the space occupied by the first and the fourth posts to be occupied by a single post.ie the first image needs to be twice the size of the rest.In total five images will be rendered then. I've tried doing it but can't figure out how.

html

<div class="relatedposts">
 <div class="relatedthumb">
     <img src="http://placekitten.com/336/200" >
        <h3 class="justin-cover">Lets make this work</h3>
 </div>
  <div class="relatedthumb">
     <img src="http://placekitten.com/336/200" >
         <h3 class="justin-cover">Lets make this work</h3>
 </div>
  <div class="relatedthumb">
     <img src="http://placekitten.com/336/200" >
         <h3 class="justin-cover">Lets make this work</h3>
 </div>
  <div class="relatedthumb">
     <img src="http://placekitten.com/336/200" >
         <h3 class="justin-cover">Lets make this work</h3>
 </div>
  <div class="relatedthumb">
     <img src="http://placekitten.com/336/200" >
         <h3 class="justin-cover">Lets make this work</h3>
 </div>
  <div class="relatedthumb">
     <img src="http://placekitten.com/336/200" >
        <h3 class="justin-cover">This one clearly has too many lines that do not fit</h3>
 </div>   

css

*{
margin: 0;
padding: 0;
box-sizing: border-box;}



.relatedposts {
display:table; 
width:1024px;font-size: 0;
/* fix inline gap */
margin: 0 auto;}



.relatedthumb {
float: left;
margin-left:5px;
position: relative;
margin-bottom:10px;
}
.relatedthumb img {
text-align:center;
}
.justin-cover {
color: #fff;
font-size: 30px;
font-weight: 500;
/* height: 30%; */
width: 100%;
position: absolute;
bottom: 0;
left:0;
background: rgba(0,0,0,0.5);
padding: 10px;
transition: all 0.5s;
}

Answer 1

You can try something like this in CSS :

.relatedthumb:first-child img {
    height: 300px;   /* with your desire size */
    width:300px;     /* with your desire size */
}

Here, the :first-child will target the first element only.

Answer 2

as i figure out you need those div to represent differently according to the number.

an example : the first image red border and the fourth blue border

you can use jquery to solve this

you can set two class

class="relatedthumb special"

for the div you want to make it special

$(".specail").css("border","red")

and if it not the solution you search please explain your problem little more

or you can do it with out a class :

var count = 0;

$( "#relatedthumb " ).each(function( i ) {
    if(count%4 == 0)
    {
       this.style.width= "400";
       this.style.height= "400";
     }
     count++;
  });

so first image in every iterate will be with size 400*400