Why are these divs not aligned?

There are elements block and inline , when using display: inline-block you create a block that stays on a line, so "text" effects such as spacing and alignments will affect the divs.

Being "inline" you can apply vertical-align like this:

.content-all{
    height: 100%;
    width: 100%;

    background-color: yellow;
}

.content-descriptions{
    height:120px;
    width: 1020px;  
    background-color: green;
}

.content-descriptions-left {
    display: inline-block;
    width: 500px;
    margin: 20px;
    height: 80px;
    font-size: 14px;
    background-color:red;
  vertical-align: top;
}

.content-descriptions-right {
    display: inline-block;
    width: 400px;
    margin: 20px;
    height: 80px;
    font-size: 14px;

    background-color: blue;
}

<div class="content-all">
    <div class="content-descriptions">
        <div class="content-descriptions-left">
            BR huehue...
            <br/>
            <br/>
        </div>

        <div class="content-descriptions-right">
            Comossomo:<br/>
            <input type="radio" value="0" name="opcoes" /> X<br/>
            <input type="radio" value="0" name="opcoes" /> Y
        </div>
    </div>
</div>

I noticed that you used the fixed height height: 80px; , but if you need to make equal heights and increase accordingly, I recommend this reading:

• Adjusting width to take up space that needs to be occupied on a div

The display: inline-block can cause some headache, as I mentioned it is affected by the text properties, you can use it to create columns, but if there is any CSS property for text like% with% columns are affected, in this case you can use text-align and float (especially if you want the parent element to increase the height according to the child elements), for example:

  

pseudo clear: both is required in the "parent" element to apply :after , because clear: both elements affect the "parent" element because they are "floating" (not to be confused with float ) and thus parent no longer detects height

.content-all{
    height: 100%;
    width: 100%;
    background-color: yellow;
}

.content-descriptions {
    width: 1020px;
    background-color: green;
}
.content-descriptions:after {
    content: "";
    overflow: hidden;
    clear: both;
    height: 0;
    display: block;
}

.content-descriptions-left, .content-descriptions-right {
    margin: 20px;
    height: 80px;
    font-size: 14px;
}

.content-descriptions-left {
    float: left;
    width: 500px;
    background-color:red;
}

.content-descriptions-right {
    float: right;
    width: 400px;
    background-color: blue;
}

<div class="content-all">
    <div class="content-descriptions">
        <div class="content-descriptions-left">
            BR huehue...
            <br/>
            <br/>
        </div>

        <div class="content-descriptions-right">
            Comossomo:<br/>
            <input type="radio" value="0" name="opcoes" /> X<br/>
            <input type="radio" value="0" name="opcoes" /> Y
        </div>
    </div>
</div>

The position: absolute keeps the elements as float and different from block CSS properties for text (such as inline-block ) will not affect them. text-align works just to float (not to be confused with float ), it's as if it looks for spaces and tries to move based on the parent element and siblings. That is position: absolute he will try to move left until he finds no more "space". When you move with float: left this affects the "next brothers" "dragging" them together.

When in the example I moved an element to float with left and another to float it is as if they are floating and stop to stop having the break as long as there is space, if the width of the parent is less than the floating elements these elements will break.

You can use right , but if you experience difficulties with CSS text properties that affect then maybe you can try display: inline-block .

  .content-all{
        height: 100%;
        width: 100%;

        background-color: yellow;
    }

    .content-descriptions{
        height:120px;
        width: 1020px;  

        background-color: green;
    }

    .content-descriptions-left {
        float:left;
        width: 500px;
        margin: 20px;
        height: 80px;

        font-size: 14px;

        background-color:red;
    }

    .content-descriptions-right {
            float:left;
        width: 400px;
        margin: 20px;
        height: 80px;

        font-size: 14px;

        background-color: blue;
    }

Use float: left to align both.