Task
1.) Implement Design A (only red circled portion). Use two <p> elements, one for each label.
Styling Notes: The <p> labels should be font-size: 1.5em. You can use display: inline-block so that the labels are placed on the same line. You may need to use the margin CSS attribute to align the labels above the appropriate rating buttons. Ensure that the labels are still aligned even if you zoom in/out your browser; however, it does not need to be responsive enough for mobile devices.
Files
You will find comments in components/preferences/preferences.js and components/preferences/preferences.css that tells you where to write your code.
Task 1.) Implement
Design A(only red circled portion). Use two<p>elements, one for each label.<p>labels should befont-size: 1.5em. You can usedisplay: inline-blockso that the labels are placed on the same line. You may need to use themarginCSS attribute to align the labels above the appropriate rating buttons. Ensure that the labels are still aligned even if you zoom in/out your browser; however, it does not need to be responsive enough for mobile devices.Files You will find comments in
components/preferences/preferences.jsandcomponents/preferences/preferences.cssthat tells you where to write your code.Resources
<p>Tag: https://www.w3schools.com/tags/tag_p.asp Margin Styling: https://www.w3schools.com/css/css_margin.aspDesign A