The [CSS flexbox](https://www.educative.io/edpresso/what-is-a-css-flexbox) offers powerful alignment options for the users. A **flex container** groups multiple flex items together in order to control their representation. 

Among the many properties offered by the flex container,**`justify-content`**  is one of the most widely used.

**`flex-start`** is a value that can be assigned to the `justify-content` property to align all the flex items at the start of the container, as shown below:

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.flex-items{
  margin: 10px;
}

var TestResult = function() {
  this.succeeded = false;
  this.reason = "";
  this.input = "";
  this.expected_output = "";
  this.actual_output = "";
};

var executeTests = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];

  const jsdom = require("jsdom");
  const { JSDOM } = jsdom;
  const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

  const pTag = dom2.window.document.querySelector("p");

  const result = new TestResult();
  result.expected_output = "Hello World";
  result.input = "Html page";

  if (!pTag) {
    result.actual_output = "null";
    result.succeeded = false;
    result.reason = "No p tag found";
  } else {
    const pTagText = pTag ? pTag.textContent : "";
    result.actual_output = pTagText;
    if (pTagText.trim() != "Hello World") {
      result.reason = "Expected output (Hello World in a p tag) did not match";
      result.succeeded = false;
    } else {
      result.succeeded = true;
      result.reason = "Found p tag with Hello World";
    }
  }

  results.push(result);

  return results;
};

// Async Tests Example
/*
var executeTestsAsync = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];
  return new Promise(resolve => {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

    if (!dom2.window.onModulesLoaded) {
      console.log("window.onModulesLoaded not found!");
    	resolve(results);
    }
    dom2.window.onModulesLoaded.then(()=>{
      const pTag = dom2.window.document.querySelector("p");

      const result = new TestResult();
      result.expected_output = "Hello World";
      result.input = "Html page";

      if (!pTag) {
        result.actual_output = "null";
        result.succeeded = false;
        result.reason = "No p tag found";
      } else {
        const pTagText = pTag ? pTag.textContent : "";
        result.actual_output = pTagText;
        if (pTagText.trim() != "Hello World") {
          result.reason = "Expected output (Hello World in a p tag) did not match";
          result.succeeded = false;
        } else {
          result.succeeded = true;
          result.reason = "Found p tag with Hello World";
        }
      }

      results.push(result);
      resolve(results);
    });
  });
};
*/

<html>
 <head>
 </head>
 <body>

<div class="flex-container">
  <button  class="flex-items">Muhammad</button>
  <button  class="flex-items">Hassan</button>
  <button  class="flex-items">Arshad</button>
</div>
 </body>
</html>

document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
  newVal.innerHTML = '';
  pTag.appendChild(newVal);
});

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/