[SOLUCIONADO] Como hacer esto con los estilos css

[alexkurban]

Hola a todos, recurro otra vez a vosotros (se que soy un pesado, lo se...) porque llevo peleandome con este tema mucho tiempo y no encuentro solucion viable al problema, veran, necesito hacer una tabla de items para una supuesta tienda online (solo el front end) y necesito dividir este row en 3 items de manera que queden como en la foto, el que me preocupa es el que ocupa 2 espacios;

http://prntscr.com/7tvyhk

el tema es que luego necesitare aplicar jQuery para que se pueda seleccionar y quede asi;

http://prntscr.com/7tw0g8


uso el sistema de grids de 1140px y por mas que lo intento, me queda asi;

http://prntscr.com/7tw1oa


añadir el carrito, los padding y demas los podre hacer bien para alinear la estructura pero el tema de que la imagen quede alineada a la izquierda y el texto a la derecha con el precio y demas no logro hacerlo. se que luego con el jQuery es un tema de addClass o de toggle, pero se que para aplicarlo tiene que estar reunido en un mismo div y si lo parto en 2 a la hora de seleccionarlo no podria.
mi codigo es asi:

Código HTML:

<div class="container12">
            <div class="row">
                <div class="column6">
                    <div>
                        <img src="img/xe22.jpg" id="xe22" alt="">
                    </div>
                    <div>
                            <p><strong>Fujifilm X-E2 Kit 18-55mm</strong></p>
                            <br>
                            <p>Беззеркальная 16.3 Мп 1.5crop.
                            C обьективом F2.8-4.0 18-55mm
                            Экран 3” 1 040 000 пикс.
                            Электронный видоискатель
                            Металический корпус
                            Live View с автофокусом
                            ISO 200-2500
                            Сьемка Full HD видео 60 кадров/сек
                            Поддержка карт SD, SDHC, SDXC
                            WiFi
                            <br>
                            <br>
                            <strong><del> 14 850 000</del></strong>
                            <hr>
                            <strong> 8 355 000</strong></p>
                    </div>
                </div>

                <div class="column3">
                    <img src="img/700d.jpg" alt="">
                        <p><strong>Canon EOS 700D Kit 18-55 IS STM</strong></p>
                        <br>
                        <p>Зеркальная, 18 Мп 1.6 crop.
                        С обьективом F3.5-5.6 18-55mm
                        Экран 3” сенсорный, поворотный,
                        Видеоискатель оптический</p>
                        <hr>
                        <p><strong> 8 355 000</strong></p>
                </div>

                <div class="column3">
                    <img src="img/x100s.jpg" alt="">
                        <p><strong>Fujifilm X100S</strong></p>
                        <br>
                        <p>Компакт-камера, 16.3Мп 1.5 crop, F2.0
                        35мм, экран 2.8”</p>
                        <hr>
                        <p><strong> 12 999 000</strong></p>
                </div>
            </div> 

y el css pues es el sistema de grid de 1140px;

Código HTML:

.container12, .container16 {
    margin:0 auto;
    padding:0;
    position:relative;
    width:1140px;
}
.row {
    margin-bottom: 20px;
}

.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 {
    display:inline;
    float:left;
    margin-left:10px;
    margin-right:10px;
}

ayudita por favor

[alexkurban]

Ya solucione el tema

[pzin]

No vayas a comentar cómo lo solucionaste.

[alexkurban]

Hola, la solucion era bastante mas simple de lo que pensaba, era jugar con el atributo border y darle estilo y aparte colocar un height al row para que estuvieran al mismo nivel y quitarle paddings y margins para que estuvieran juntos y coincidiera el border.

[cletus]

Hola!

Es más o menos el mismo problema que tengo yo. Puedes dejarlo aceptablemente bien mediante los CSS, pero siempre que tengas todos los elementos desde el principio, para poder saber que altura ponerle a cada una de las partes del <div>.
Si en algún momento pretendes sacar la información de la BD, puede descolocarse todo en cuanto haya un atributo mayor de los establecido al principio (un título que ocupe 3 líneas, por ejemplo...), y teniendo en cuenta que al disminuir el tamaño de la ventana se modificará el número de líneas que ocuparán los atributos, hace que deje de ser un diseño responsive.
Se disponen los elementos en la forma esperada si disminuyes la ventana?

Saludos!!