How can i get dynamic Google Now style cards using just css/html

First question here. I'm trying to get google now cards that maintain their width, vertical position relative to other cards, and size relative to their content. Like this that compresses to one column when the window resizes small enough.

I have this, which works until you have a third card, or until the second card has more content than the first.

h1 { 
    color:white;
    font-family:"Roboto";
    font-weight:100;
    font-size:36px;
}
h2 {
    font-family:'Roboto';
    font-weight:100;
    font-size:30px;
    color:#212121;
}
h4 {
    font-family:'Roboto';
    font-weight:400;
    font-style: italic;
    font-size:16px;
    color: #727272;
    border-top: 1px solid #727272;
    padding-top: 4px;
}
p {
    font-family:'roboto';
    font-weight:400;
    font-size:20px;
    color:#727272;
}
.content-link {
    color:#212121;
    text-decoration: none;
    font-weight:700;
}
.card-track {
    width:100%;
    height: auto;
    position:relative;
}
.card {
    width: 466px;
    margin: 15px;
    background-color:white;
    border-radius: 4px;
    float:left;
}
.card-color {
    width:466px;
    height: 96px;
    background-color: #395a66;
    position:absolute;
    border-radius: 4px 4px 0px 0px;
}
.card-icon {
    height: 46px;
    width:46px;
    margin: 25px;
    float:left;
}

.card-icon-img {
    max-height: 48px;
    height: auto;
    -webkit-filter: invert(100%);
}
.card-content-icon-img {
    max-height: 50px;
    height: auto;
    -webkit-filter: opacity(55%);
}
.card-color-title {
    margin:27px;
}
#gamingthronebar {
    background-color:#FFC107;
}
#colorbar {
    background-color:#673AB7;
}
.card-content {
    padding:100px 30px 20px 60px;
}
.card-content-icon {
    float:left;
    width:60px;
    height:60px;
    margin:120px 0px 0px 24px;
}

<link href='http://ift.tt/1KjWWou' rel='stylesheet' type='text/css'>

<div class="card-track">
        <!-- Card
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src=""></div>
                <h1 class="card-color-title"></h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src=""></div>
            <div class="card-content">
                <p></p>
                <h4></h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/verification24.png"></div>
                <h1 class="card-color-title">Hello, World!</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/android11.png"></div>
            <div class="card-content">
                <p>Take a look around this site, it's designed based upon the glorious look and feel of <a class="content-link" href="http://ift.tt/1mfaaEo">Material Design</a>, a visual scheme designed by Google for use with Android 5.0 Lollipop. </p>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color" id="colorbar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/good4.png"></div>
                <h1 class="card-color-title">No Java required</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/painter14.png"></div>
            <div class="card-content">
                
                <h2></h2>
                <p> Check it out! Right click > "Inspect Element"</p>
                <h4>Learn More</h4>
            </div>
        </div> <!--End Card-->
        <div class="card">
            <span class="card-color" id="gamingthronebar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/gamingthronewhite.png"></div>
                <h1 class="card-color-title">Another cool project</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/memory1.png"></div>
            <div class="card-content">
                <p>This is a test of the emergency broadcast system.</p>
                <h4>This is a link</h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/round58.png"></div>
                <h1 class="card-color-title">About the designer</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/create3.png"></div>
            <div class="card-content">
                <p>I'm no one of consequence. But if you must know, I like Material Design. This website is a work in progress, but it's my best shot.</p>
                <h4>Professional Version</h4>
            </div>
        </div><!--End Card-->
    </div><!--End card track-->

And this works to a great extent, but the height of the cards are determined by the card in the next column, which is close, but I want the cards to be determined by the height of the one above it.

h1 { 
    color:white;
    font-family:"Roboto";
    font-weight:100;
    font-size:36px;
}
h2 {
    font-family:'Roboto';
    font-weight:100;
    font-size:30px;
    color:#212121;
}
h4 {
    font-family:'Roboto';
    font-weight:400;
    font-style: italic;
    font-size:16px;
    color: #727272;
    border-top: 1px solid #727272;
    padding-top: 4px;
}
p {
    font-family:'roboto';
    font-weight:400;
    font-size:20px;
    color:#727272;
}
.content-link {
    color:#212121;
    text-decoration: none;
    font-weight:700;
}
.card-track {
    width:100%;
    height: auto;
    position:relative;
    text-align: center;
}
.card {
    width: 466px;
    margin: 15px;
    background-color:white;
    border-radius: 4px;
    display:inline-flex;
    text-align: left;
}
.card-color {
    width:466px;
    height: 96px;
    background-color: #395a66;
    position:absolute;
    border-radius: 4px 4px 0px 0px;
}
.card-icon {
    height: 46px;
    width:46px;
    margin: 25px;
    float:left;
}

.card-icon-img {
    max-height: 48px;
    height: auto;
    -webkit-filter: invert(100%);
}
.card-content-icon-img {
    max-height: 50px;
    height: auto;
    -webkit-filter: opacity(55%);
}
.card-color-title {
    margin:27px;
}
#gamingthronebar {
    background-color:#FFC107;
}
#colorbar {
    background-color:#673AB7;
}
.card-content {
    padding:100px 30px 20px 60px;
}
.card-content-icon {
    float:left;
    width:60px;
    height:60px;
    margin:120px 0px 0px 24px;
}

 <link href='http://ift.tt/1KjWWou' rel='stylesheet' type='text/css'>

<div class="card-track">
        <!-- Card
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src=""></div>
                <h1 class="card-color-title"></h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src=""></div>
            <div class="card-content">
                <p></p>
                <h4></h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/verification24.png"></div>
                <h1 class="card-color-title">Hello, World!</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/android11.png"></div>
            <div class="card-content">
                <p>Take a look around this site, it's designed based upon the glorious look and feel of <a class="content-link" href="http://ift.tt/1mfaaEo">Material Design</a>, a visual scheme designed by Google for use with Android 5.0 Lollipop. </p>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color" id="colorbar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/good4.png"></div>
                <h1 class="card-color-title">No Java required</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/painter14.png"></div>
            <div class="card-content">
                
                <h2></h2>
                <p>There was lots of java involved in the making of this website, but there's none in this website. Check it out! Right click > "Inspect Element"</p>
                <h4>Learn More</h4>
            </div>
        </div> <!--End Card-->
        <div class="card">
            <span class="card-color" id="gamingthronebar">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/gamingthronewhite.png"></div>
                <h1 class="card-color-title">Another cool project</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/memory1.png"></div>
            <div class="card-content">
                <p>This is a test of the emergency broadcast system.</p>
                <h4>This is a link</h4>
            </div>
        </div><!--End Card-->
        <div class="card">
            <span class="card-color">
                <div class="card-icon"><img class="card-icon-img" src="material-design-icons/round58.png"></div>
                <h1 class="card-color-title">About the designer</h1>
            </span>
            <div class="card-content-icon"><img class="card-content-icon-img" src="material-design-icons/create3.png"></div>
            <div class="card-content">
                <p>I'm no one of consequence. But if you must know, I like Material Design. This website is a work in progress, but it's my best shot.</p>
                <h4>Professional Version</h4>
            </div>
        </div><!--End Card-->
    </div><!--End card track-->

Any thoughts? The website has more to it obviously, but that's the main thing I'm struggling with currently.