layout in 2 columns--how

using inline-block, with padding, and width as %

by hrabinowitz

HTML

<div class="outer">
    Some initial text.
</div>
<div class="outer2">
    <div class="inner1">
        left column. • The phone screen will last one hour and will probe several areas of front end software development with questions probing events, promises, accessibility, prototypal inheritance, floats in CSS and other key concepts. You may be asked to
        implement a small practical solution to demonstrate knowledge.
    </div><div class="inner2">
        right column. • The second half of the phone screen will probe programming ability. You will be asked to implement code in JavaScript and possibly also HTML+CSS for a small pragmatic problem. Additionally, you will be asked to implement a solution to
        a small algorithmic problem. The problem will be solvable using JavaScript, but you may use any language of your choice. You should ask clarifying questions and also be able to optimize when prompted by your interviewer. You should also be able
        to speak to testing strategies and ways to cover edge cases.
    </div>
</div>
<div class="outer3">
footer text goes here
</div>

CSS

.outer {
    padding: 5px;
}
.outer2 {
    background-color: red;
}
.inner1 {
    /*float: left;*/
    display: inline-block;
    width: 40%;
    background-color: yellow;
    vertical-align: top;
    padding: 10px;
    /*margin: 5px;*/
    /*clear: left;*/
}

.inner2 {
    /*float: right;*/
    display: inline-block;
    width: 40%;
    background-color: turquoise;
    padding: 10px;
}

JavaScript

$(document).ready(function() {
    //alert('hi henry');
});