[![enter image description here](https://i.stack.imgur.com/nyCI5.png)](https://i.stack.imgur.com/nyCI5.png)

How can I add the space to all the image icon and the title? I want to make it look like this

---

[![enter image description here](https://i.stack.imgur.com/ETJqR.png)](https://i.stack.imgur.com/ETJqR.png)

---

and still keep the gray background color. With padding, I got this

---

[![enter image description here](https://i.stack.imgur.com/SgdGk.png)](https://i.stack.imgur.com/SgdGk.png)

```
struct SampleView : View {
    var myData: myDataItem?
    var body: some View {

        VStack(alignment: .leading, spacing:10) {
        Text("sample message").font(.system(size: 12)).fontWeight(.medium)
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 24, maxHeight: 24, alignment: .topLeading)
            .background(Color("lightGray"))
        HStack(alignment: .firstTextBasemyData, spacing: 5) {
            Image("info")
            Text("Discount").fontWeight(.regular)
            Spacer()
            Text("$\(String(format: "%.2f", (self.myData?.discount)!)) ").fontWeight(.regular)
        }
            HStack(alignment: .firstTextBasemyData, spacing: 5) {
            Image("info")
            Text("sample message”").fontWeight(.regular)
            Spacer()
            Text("$\(String(format: "%.2f", (self.myData?.planPaid)!)) ").fontWeight(.regular)
        }
            HStack(alignment: .firstTextBasemyData, spacing: 5) {
            Image("info")
            Text("sample message1").fontWeight(.regular)
            Spacer()
            Text("$\(String(format: "%.2f", (self.myData?.sampledata)!)) ").fontWeight(.regular)
        }
    }.font(.system(size: 16))
    }
}

```