[SalesForce] Need Help with custom types in Lightning DataTable – LWC

You have to use typeAttribute object in URL column. I tried to use JS object but couldn't use JS object in typeAttribute in datatable. So, my finding was that your label should be a field in each entry in data list. Try this playground version of your code: https://developer.salesforce.com/docs/component-library/tools/playground/vi7rAWnIH/20/edit

Issue with your version of code which is rendering label as target is there is no value attribute in typeAttribute object. It's correct name is target. Screenshot from lightning-datatable documentation:

Codet snippet in case playground is not available:

JS data array:

const data =  [{createdDate : "1479944705000" , duplicateWebsite : "www.google.com", websiteLabel:"google", personDetailMatch : true }];

datatable column definition:

const columns = [
    { label: 'Date', fieldName: 'createdDate' , type: 'date-local',typeAttributes :{ month: "2-digit",day: "2-digit"}},
    { label: 'Duplicate Website', fieldName: 'duplicateWebsite', type: 'url' , typeAttributes:{label: { fieldName: 'websiteLabel' }}},
    { label: 'Person Detail Match', fieldName: 'personDetailMatch', type: 'boolean' } 
];

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