Arrange a list of Data in Column and Row format using SLDS

Question

I have a html file where I am trying to display some data in a better way, like this:

Job Details  |  Value
_____________|__________
JobType      | Future     
________________________
Status       | Failed
________________________
CompletedDate| XXX     
________________________
MethodName   | XXX
________________________

I referenced https://developer.salesforce.com/docs/component-library/bundle/lightning-layout/example to get started with. Hoping it was straight forward, however I am missing something to arrange my below code in the table I desire:

I have simplified the code to look like below that can be used with lwc playground - https://developer.salesforce.com/docs/component-library/tools/playground/ced655354d445ce0d0da1587ed3b554644d95203/edit

<template>
        <p>The layout items extend vertically to fill the container.</p>
    <div class="c-container">
        <lightning-layout vertical-align="stretch" multiple-rows="true" class="x-large">
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">JobType</p>
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
                        <p class="slds-p-around_medium slds-text-align_left">CompletedDate</p> 
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">Future</p>
                        <p class="slds-p-around_medium slds-text-align_left">Failed</p>
                        <p class="slds-p-around_medium slds-text-align_left">XXX</p>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

When I try to view this it comes out like below.

However the table started to look horizontally when I add another

which has quite a long text in it like below:

<template>
        <p>The layout items extend vertically to fill the container.</p>
    <div class="c-container">
        <lightning-layout vertical-align="stretch" multiple-rows="true" class="x-large">
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">JobType</p>
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
                        <p class="slds-p-around_medium slds-text-align_left">CompletedDate</p> 
                        <p class="slds-p-around_medium slds-text-align_left">Status</p>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="around-small" class="custom-box">
                                        <p class="slds-p-around_medium slds-text-align_left">Future</p>
                        <p class="slds-p-around_medium slds-text-align_left">Failed</p>
                        <p class="slds-p-around_medium slds-text-align_left">XXX</p>
                        <p class="slds-p-around_medium slds-text-align_left">First error: Insert failed. First exception on row 0; first error: REQUIRED_FIELD_MISSING, Required fields are missing: [GroupId, UserOrGroupId]: [GroupId, UserOrGroupId]</p>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

CSS:

.c-container {
    border: 1px solid #d8dde6;
    margin: 10px 0 20px 0;
}
 .large {
    height: 200px;
}
 .x-large {
    height: 300px;
}
 .custom-box {
    text-align: center;
    background-color: #f4f6f9;
    padding: 1rem;
    border: 1px solid #d8dde6;
}

I tried to use slds truncate_25 for the

element but that did not help. How can I achieve the result in this format( possibly with boders ):

Job Details  |  Value
_____________|__________
JobType      | Future     
________________________
Status       | Failed
________________________
CompletedDate| XXX     
________________________
MethodName   | XXX
________________________

Answer 1

I can never understand why people bother with lightning layouts. Basically they are just as verbose as regular html, and you have less control. If you just the regular slds design system + some divs, your layout is easy. Here:

    <lightning-card>
  <p class="slds-p-around_medium"  >The layout items extend vertically to fill the container.</p>
  <div class="slds-grid slds-p-around_medium" >
    <div class="slds-col slds-grow-none flex-col" >
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">JobType</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">Status</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom " >CompletedDate</p> 
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom flex-cell" >Status</p>
    </div>
    <div class="slds-col slds-grow-none flex-col">
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">Future</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">Failed</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom ">XXX</p>
      <p class="slds-p-around_medium slds-text-align_left slds-border_bottom flex-cell" style="width:200px;overflow-wrap: break-word">&nbsp;asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfwertwertwertwertwertwertwertwertwertwertwertwert</p>
    </div>
  </div>
</lightning-card>

CSS:

.flex-col{
    display:flex;
    flex-direction:column;
}
.flex-cell{
    flex:1;
}

The key css class is slds-grow-none. This means your columns will shrink to the size of the smallest item, which will line everything up nicely.

This renders as:

Playground is here