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”
}
}
]
}
]
}
}

​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”
}
}
]
}
]
}
}  Read More

​