Alternate div width per row

Question

So basically i have this markup

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
</div>

How will i be able to have alternate width for the first & second div per row?

I tried article:nth-child+ diff stepping to target alternate divs, but i cant find the right combination of stepping

Edit: I really can't edit the HTML structure since this is a WordPress plugin output

Answer 1

You will need to use :nth-child() selector here...

Actually here the pattern is repeating itself after every 4th element...So you will need to taregt 4n, 4n+1, 4n+2 and 4n+3

.container {
  display: flex;
  flex-wrap: wrap;
}

article {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border: 5px solid #fff;
  background: gray;
  box-sizing: border-box;
  color: #fff;
  font: bold 20px Verdana;
}

article:nth-child(4n),
article:nth-child(4n+1) {
  width: 25%
}

article:nth-child(4n+2),
article:nth-child(4n+3) {
  width: 75%
}

<div class="container">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
</div>

Answer 2

you should apply class for correct adjustment of articles use only two class with width 66% and 33%