SharePoint List JSON Formatting - Layout elements horizontally instead of vertically

[EdwardHodson]

How to I change the JSON below so that the elements shown in the screenshot are laid out horizontally instead of vertically?

Thank you,

Ed

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": false,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "margin-left": "10px",
          "margin-right": "25px",
          "height": "130px"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "@thumbnail.large",
              "title": "[$Title]"
            },
            "style": {
              "border": "1px solid #808080",
              "border-radius": "2%",
              "width": "100%"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "border-left": "2px solid rgba(200, 200, 200, 0.5)",
          "padding-left": "2px"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "style": {
              "font-weight": "semi-bold",
              "font-size": "x-large",
              "margin-left": "10px"
            },
            "txtContent": "=if([$TalkTitle] == '', [$FileLeafRef], [$TalkTitle])"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin-left": "10px",
              "font-size": "larger"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "bold"
                },
                "txtContent": "Duration: "
              },
              {
                "elmType": "span",
                "txtContent": "[$Duration]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin-left": "10px",
              "font-size": "larger"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "bold"
                },
                "txtContent": "DDD Year: "
              },
              {
                "elmType": "span",
                "txtContent": "[$DDDYear]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin-left": "10px",
              "font-size": "larger"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "bold"
                },
                "txtContent": "Speaker Name: "
              },
              {
                "elmType": "span",
                "txtContent": "[$SpeakerName]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin-left": "10px",
              "font-size": "larger"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "bold"
                },
                "txtContent": "Business Area: "
              },
              {
                "elmType": "span",
                "txtContent": "[$BusinessArea]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin-left": "10px",
              "font-size": "larger"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "bold"
                },
                "txtContent": "Product Name: "
              },
              {
                "elmType": "span",
                "txtContent": "[$ProductName]"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin-left": "10px",
              "font-size": "larger"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "font-weight": "bold"
                },
                "txtContent": "General Subject/Concept: "
              },
              {
                "elmType": "span",
                "txtContent": "[$GeneralSubject_x002f_Concept]"
              }
            ]
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "style": {
              "width": "150px",
              "margin-left": "10px",
              "display": "span"
            },
            "txtContent": "Watch Now",
            "attributes": {
              "class": "sp-row-button ms-bgColor-purple sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
            }
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "share"
            },
            "style": {
              "width": "150px",
              "margin-left": "10px"
            },
            "txtContent": "Share",
            "attributes": {
              "class": "sp-row-button ms-bgColor-grey sp-row-button ms-bgColor-purpleDark--hover ms-fontColor-white--hover"
            }
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "editProps"
            },
            "style": {
              "width": "150px",
              "margin-left": "10px",
              "display": "span"
            },
            "txtContent": "View Details",
            "attributes": {
              "class": "sp-row-button ms-bgColor-grey sp-row-button ms-bgColor-purpleDark--hover ms-fontColor-white--hover"
            }
          }
        ]
      }
    ]
  }
}

[#2]

Hi

To change the layout of the elements from vertical to horizontal, you can use the display property in CSS. Specifically, you can set display to flex or inline-flex to make the elements display horizontally.

Thanks!

[#3]

Hi @Ankit,

Thanks for your reply. I'm only able to edit the JSON and it's only the elements that I circled in green that I'm looking to layout horizontally. Do you know how the changes can be made in the JSON?

Thank you,

Ed

[#4]

Hi Edward,

Sure will provide you JSON code shortly !!

Thanks