Display Article Element Horizontally In Html

How can I set the article element to display horizontally; inline, instead of vertically, one below the other?

Solution 1:

option 1

• set float:left

article {
  border: 1px red solid;
  float: left;
  width: 100px
}

<article>article 1</article><article>article 2</article><article>article 3</article>

option 2

• set display:inline-block

body {
  /*fix-inline-block*/font-size: 0
}
article {
  border: 1px red solid;
  display: inline-block;
  width: 100px;
  /*reset the font*/font-size: 16px
}

<article>article 1</article><article>article 2</article><article>article 3</article>

option 3

• set display:table/table-cell

section {
  display: table
}
article {
  border: 1px red solid;
  display: table-cell;
  width: 100px
}

<section><article>article 1</article><article>article 2</article><article>article 3</article></section>

option 4

• set display:inline-flex

body {
  /*fix-inline-flex*/font-size: 0
}
article {
  border: 1px red solid;
  display: inline-flex;
  width: 100px;
  /* reset the font */font-size: 16px
}

<article>article 1</article><article>article 2</article><article>article 3</article>

option 5

• set display:flex

section {
  display: flex;
}
article {
  border: 1px red solid;
  width: 100px;
  font-size: 16px
}

<section><article>article 1</article><article>article 2</article><article>article 3</article></section>