Display 4 numbers for one leaflet marker/point - leaflet

Question

So, I have weather data that I need to show winds, temperature and dewpoint for one lat/long point.
I am able to show the marker in leaflet as a point but I can not figure out how to draw a point with essentially 4 label's at the 12, 3, 6, and 9 o'clock positions.
My initial thought was to use the marker with DivIcon to create a text marker. one for each category of each point. However, this is obviously not the best way as that would mean that I now have 5 points for each point (one for the marker and one for each of the 4 categories).
My next thought, as somewhat already stated, is to create a marker with 4 labels.
Is this the best way? One marker with 4 labels? If so, how do I code that.
Is there something else I'm not thinking of that would be better.
Any help, guidance and/or code would be very helpful.
Other items. I'm using geoJson files as my data which i have included a sample of. I have also included a picture of what the outcome should look like.
{
"name": "CurrentCondtions",
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"coordinates": [ -63.17, 46.35 ],
"type": "Point"
},
"properties": {
"DateTimeCurCond": "3/21/2018 11:00:00 AM",
"Station": "CAHR",
"Id": "HARRINGTON CDA CS",
"Temperature": "33",
"SusWind": "14",
"GustWind": "",
"PeakWind": "20",
"MaxWind": "20",
"Dewpoint": "19",
"Identifier": "Point"
}
}]}

Answer 1

I found a solution.
return new L.Marker(latlng,
{
icon: new L.DivIcon(
{
className: 'baseCurCondClass',
// html here defines what goes in the div created for each marker
html: '<div id="curConditionPoint" class="baseCurCondClass" style="width:100px;">'
+ '<div class="row">'
+ '<div class="col-sm-12">'
+ '<div class="maxWindClass text-center">' + feature.properties.MaxWind + '</div>'
+ '</div>'
+ '</div>'
+ '<div class="row">'
+ '<div class="col-sm-4">'
+ '<div class="temperatureClass text-right">' + feature.properties.Temperature + '</div>'
+ '</div>'
+ '<div class="col-sm-4">'
+ '<div>C</div>'
+ '</div>'
+ '<div class="col-sm-4">'
+ '<div class="dewpointClass text-left">' + feature.properties.Dewpoint + '</div>'
+ '</div>'
+ '</div>'
+ '<div class="row">'
+ '<div class="col-sm-12">'
+ '<div class="susWindClass text-center">' + feature.properties.SusWind + '</div>'
+ '</div>'
+ '</div>'
+ '</div>',
// and the marker width and height
iconSize: null,
iconAnchor: [50, 50]
})
});
}
.susWindClass { /*bottom*/
color: #003ef7;
}
.maxWindClass { /*top*/
color: #FF0000;
}
.temperatureClass { /*left*/
color: #FFFF00;
position: absolute;
right: 0px;
}
.dewpointClass { /*right*/
color: #D58D14;
position: absolute;
left: 0px;
}