Как расположить два div с разными идентификаторами в одной строке?

Question

Текущий код выглядит следующим образом:

div {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px transparent;
}

div#myDiv1 {
  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  -webkit-transform: matrix(1, 0.3, 0, 1, 0, 0);
}

<div id="myDiv1">
  <p class="mt15 colorc1 center font16">a</p>
</div>
<div id="myDiv2" class="right">
  <p class="mt15 colorc1 center font16">b</p>
</div>
<div id="myDiv1">
  <p class="mt15 colorc1 center font16">c</p>
</div>

Вот как я хочу это устроить. Перекос в одном ряду должен быть противоположен друг другу.

Answer 1

Не уверен, если это вы хотите, но я просто сделал это так же, как изображение. Я добавил wrapper для каждой строки и немного CSS, чтобы сделать divs встроенным

div {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px transparent;
  text-align: center;
}

.wrapper {
  display: inline;
}

div#myDiv1 {
  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
  display: inline-block;
}

div#myDiv2 {
  -webkit-transform: matrix(1, 0.3, 0, 1, 0, 0);
  display: inline-block;
}

div#myDiv3 {
  -webkit-transform: matrix(1, 0.3, 0, 1, 0, 0);
}

<div class="wrapper">
  <div id="myDiv1">
    <p class="mt15 colorc1 center font16">a</p>
  </div>
  <div id="myDiv2" class="right">
    <p class="mt15 colorc1 center font16">b</p>
  </div>
</div>
<div class="wrapper">
  <div id="myDiv3">
    <p class="mt15 colorc1 center font16">c</p>
  </div>
</div>