I want to create something like this in a layout where the icon line themselves up with html, how can i get this done?

You need to learn more about CSS Layout:

• How to use and what the benefit of using div tag in HTML
• How to create grid using Flexbox CSS or Grid CSS

The links I mention it's contains useful content for you, and with the w3schools site you can play around with their playground.

CodePudding user response：

To achieve your design this is what you can do as shown below.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  flex-direction: column;
  width: 100%;/*can edit as per requirement*/
}

.d-flex .col .child {
  display: flex;
  flex-wrap: wrap;
}

.d-flex .col {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
  justify-content: space-between;
}

.d-flex p {
  padding: 0 1rem;
}

<!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div >
  <div >
    <div >
      <span ></span>
      <p>View, manage and publish your personal data</p>
    </div>
    <span ></span>
  </div>
  <div >
    <div >
      <span ></span>
      <p>View, manage and store your Contacts</p>
    </div>
    <span ></span>
  </div>
  <div >
    <div >
      <span ></span>
      <p>View your technicaldata*</p>
    </div>
    <span ></span>
  </div>
</div>