Как поместить холст и список в один div

Question

Я новичок в css3 и html5. У меня есть несколько холстов, и у каждого есть текстовое описание в виде списка. Я хочу поместить каждый холст и его список описаний в один и тот же div. Теперь у меня есть холст, который всегда находится под списком. Когда у меня будет больше пар, все списки появятся вместе вверху, а холсты появятся под ними.

html5 код:

<div class="detail-section">
     <div class="detail-section-text">
        <p class="detail-section-text-title">Description</p>
        <ul>
            <li id="Descriptiontext"></li>
        </ul>
    </div>
    <canvas class="detail-section-canvas" id="canvas1"></canvas>
</div>

CSS код:

.detail-section {
    margin: 2em 2em 2em 2em;
    width: 40%;
}

.detail-section-text {
    display: inline-block;
}

.detail-section-canvas {
    width: 60%;
    padding: 1em;
    width: 20%;
    height: 20%;
}

.detail-section-text-title {
    font-weight: bolder;
}

Как разместить список слева, а холст - справа?

Answer 1

Следует поместить холст справа, а текст слева:

.detail-section-text {
    display: inline-block;
    left: 0%;
}
.detail-section-canvas {
    width: 60%;
    padding: 1em;
    width: 20%;/* I don't think you meant to have 2 width deceleration's, pick whatever one is right*/
    height: 20%;
    left: 50%;
}